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) => {
              this.tags = response.data;
          })
          .catch((err) => {

          })
        }
    }
</script>

当我从第一个组件中选择选项时，我没有使用其他ID更新第二个组件上的category_id，我仅获得1 ID。我该如何解决？如何从选择字段中使用新选择的数据刷新第二个组件？ Axios无法正常工作。为什么？ Axios不是阅读道具。

Answer 1

为了使您的代码正常工作，需要修复一些问题。首先，在父组件上，您可以删除v-model="category"并将@change="setCategory(category)"更改为@change="setCategory"

您的选择将是：<select name="category" @change="setCategory" class="form-control select-group" id="category">

在该方法中，使用事件目标值属性获取所选值，这样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（））
在mounted（）上调用performRequest（）
在属性（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>

由于类别属性与props相同，因此也不需要category_ids变量。

Answer 2

我想问题出在第二个组件中的名称是 category_id ，应该是'category-id'或 categoryId 。

Answer 3

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

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

而在组件2中，您期望使用名为categoryId的道具。

props: ['categoryId'],

只需使它们保持一致，它将对您有用。

这是工作中的fiddle

顺便说一句，顺便说一句，您无需在data ()中重新声明具有不同名称的道具，只需使其具有反应性即可。这些道具已经具有类似于数据属性的反应性。

Vue.js没有刷新其他组件

3 个答案: