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

在模板中，道具必须是烤肉串。

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

此外，您无需在数据中重新定义道具。摆脱组件2中的category_ids，只会使事情变得混乱。

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

Answer 2

为了使您的代码正常工作，需要修复一些问题。首先，在父组件上，您可以删除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变量。

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

2 个答案: