Javascript Vuejs不是刷新其他组件

我有两个部分。构成部分1：

<template>
<div>
<div class="form-group">
    <label for="group">Category</label>

    <select name="category" v-model="category" @change="setCategory(category)" class="form-control select-group" id="category">
        <option value="1">Category 1</option>
        <option value="2">Category 2</option>
    </select>
</div>

<tags-multiselect :categoryId="category"></tags-multiselect>

</div>
</template>

<script>
export default {
  data () {
    return {
      category: 1,
    }
  },

  methods: {
    setCategory(selected) {
      this.category = selected;
    },
  },
}
</script>

构成部分2：

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-default">
                <div class="card-header">Example Component</div>

                <div class="card-body">
                    I'm an example component.
                </div>
            </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['categoryId'],
        data () {
         return {
           category_ids: this.categoryId
        }
        },
        created() {
        axios.post('/tags', { category_id: this.categoryId })
          .then((response) => {
              this.tags = response.data;
          })
          .catch((err) => {

          })
        }
    }
</script>

当我从第一个组件中选择选项时，我不会用另一个id更新第二个组件上的category_id，我只得到1个id。我如何解决这个问题？如何使用“选择”字段中的新选定数据刷新第二个组件？

---

Axios不工作。为什么？Axios不是阅读道具。

我想问题在于第二个组件中的名称category\u id，应该是“category id”或categoryId。

我认为问题在于道具的名称。在组件1中，您将数据传递给道具类别id

只要让这些保持一致，它就会对你有用

这是一张工作票

---

而且，顺便说一句，您不需要在数据中重新声明具有不同名称的道具，而只是为了使其具有反应性。这些道具已经与数据属性类似了。

为了让代码正常工作，有一些东西需要修复。首先，在父组件上，可以删除v-model=category并将@change=setCategorycategory更改为@change=setCategory

您的选择将是：

在该方法中，使用事件目标值属性获取选定值，这样Vue将检测更改并更新子对象中的道具：

  methods: {
    setCategory(e) {
      this.category = e.target.value;
    }
  },

因此，您的组件1将是：

<template>
<div>
<div class="form-group">
    <label for="group">Category</label>

    <select name="category" @change="setCategory" class="form-control select-group" id="category">
        <option value="1">Category 1</option>
        <option value="2">Category 2</option>
    </select>
</div>

<tags-multiselect :categoryId="category"></tags-multiselect>

</div>
</template>

<script>
export default {
    data () {
        return {
            category: 1,
        }
    },
  methods: {
    setCategory(e) {
      this.category = e.target.value;
    },
  },
}
</script>

在子组件中，我创建了变量axiosReponseData来存储axios调用的响应，您可以随意命名它。您应该执行以下操作来修复它：

将axios调用移动到一个新方法，让我们调用它performRequest 挂载时调用performRequest 在prop categoryId中添加一个观察者，这样每当它改变时，这个观察者就会调用performRequest方法并更新数据。 因此，子组件中的代码将是：

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-default">
                <div class="card-header">Example Component</div>
                <div class="card-body" v-if="axiosReponseData">

                    I'm an example component.
                    {{axiosReponseData.id}}
                </div>
            </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
    export default {
        props: ['categoryId'],
        data () {
            return {
                axiosReponseData: null
            }
        },
        mounted() {
            this.performRequest();
        },
        methods:
        {
            performRequest() {
                if (this.categoryId){
                    axios.post('/tags', { category_id: this.categoryId })
                    .then((response) => {
                        this.axiosReponseData = response.data;
                    })
                    .catch((err) => {

                    })
                }
                else {
                    this.axiosReponseData = null;
                } 
            }
        },
        watch: {
            categoryId: function () {
                this.performRequest();
            }
        }

    }
</script>

---

此外，您不需要category_id变量，因为它与道具相同。

它们之间的关系如何？它们是兄弟组件吗？父母和孩子？不，这不起作用。当我选择选项时，第二个组件类别上的ID未更新您是否正确注册了组件？尝试在子组件中显示来自父级的属性。可能尝试从全局注册的组件切换到本地注册的组件。不工作…：在onchange select上，数据不显示是。。组件'select-category'，需要'./components/SelectCategoryComponent.Vue'。默认值；Vue.component'tags-multiselect'，需要'./components/TagsSelectComponent.Vue'。默认值；我已经添加了一个演示提琴，看看这是否对您有帮助。@waleedali关于挂载方法不起作用：尝试在挂载中执行console.logcategoryId首先，它是console.logthis.categoryId，您在这里缺少这个。其次，在安装组件时，此已安装的函数/钩子只会被调用一次，并且由于categoryId作为道具传递给子组件，因此在当时它看起来未定义的可能性更高。如果每次父属性更改时要控制子组件中的日志，请考虑使用更新的钩子而不是安装的

<template>
<div>
<div class="form-group">
    <label for="group">Category</label>

    <select name="category" @change="setCategory" class="form-control select-group" id="category">
        <option value="1">Category 1</option>
        <option value="2">Category 2</option>
    </select>
</div>

<tags-multiselect :categoryId="category"></tags-multiselect>

</div>
</template>

<script>
export default {
    data () {
        return {
            category: 1,
        }
    },
  methods: {
    setCategory(e) {
      this.category = e.target.value;
    },
  },
}
</script>

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-default">
                <div class="card-header">Example Component</div>
                <div class="card-body" v-if="axiosReponseData">

                    I'm an example component.
                    {{axiosReponseData.id}}
                </div>
            </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
    export default {
        props: ['categoryId'],
        data () {
            return {
                axiosReponseData: null
            }
        },
        mounted() {
            this.performRequest();
        },
        methods:
        {
            performRequest() {
                if (this.categoryId){
                    axios.post('/tags', { category_id: this.categoryId })
                    .then((response) => {
                        this.axiosReponseData = response.data;
                    })
                    .catch((err) => {

                    })
                }
                else {
                    this.axiosReponseData = null;
                } 
            }
        },
        watch: {
            categoryId: function () {
                this.performRequest();
            }
        }

    }
</script>