Vue选择onchange道具到子组件不起作用

Question

我有两个组件。组件 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) => {
             //
          })
          .catch((err) => {

          })
        }
    }
</script>

当我从第一个组件中选择选项时，我不会在具有其他 ID 的第二个组件上更新 category_id 我只得到 1 id。当我发送带有 category_id 的 axios 请求时，我总是只发送第一个参数1。我该如何解决这个问题？如何使用从选择字段中选择的新数据刷新第二个组件？

Answer 1

模板中props需要是kebab大小写。

试试<tags-multiselect :category-id="category"></tags-multiselect>

另外，您不需要重新定义数据中的道具。去掉组件 2 中的category_ids，它只会让事情变得混乱。

然后，Vue 使从组件中提取状态变得非常容易。据我说，共享状态（categoryId）和共享状态操作（axios.post(...)）在全局范围内会更快乐！