Question

我正在将BootstrapVue与form-checkbox组件一起使用。我有麻烦，我认为这是由于重新渲染了子组件。

组件父App.vue：

<template>
 <Countries v-bind:listOfCountries="listOfCountries" :changeStateOfCountry="changeStateOfCountry"/>
</template>

export default {
  name: 'app',
  components: {
    Countries,
  },
  data() {
    return {
      listOfCountries : [],
    }
  },

  methods: {
    changeStateOfCountry(countries){
      if(countries != null && countries.length > 3){
        this.showToastNotification();
        return;
      }
    },

我在子组件Countrys.vue中有4个复选框：

<template>
  <div>
    <b-form-group label="Using options array:">
      <b-form-checkbox-group
        id="checkbox-group"
        v-model="selected"
        :options="options"
        name="flavour"
        @change="changeStateOfCountry($event)"
        >
       </b-form-checkbox-group>
    </b-form-group>
    <ul>
    <li v-for="(country) in listOfCountries" v-bind:key="country">{{country}}</li>
  </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: this.listOfCountries,
        options: [
          { text: 'English', value: 'EN' },
          { text: 'United State', value: 'US' },
          { text: 'Russia', value: 'RU' },
          { text: 'Japan', value: 'JP' }
        ]
      }
    },
</script>

当我单击所有国家（4个国家）复选框时，它将调用changeStateOfCountry（）函数。显示错误通知。但是所有复选框的状态都为true。我希望只有3个国家/地区的状态为true，而其他国家必须为false，尽管我使用的是方法：

methods: {
    changeStateOfCountry(countries){
      if(countries != null && countries.length > 3){
        this.showToastNotification();
        return;
      }
    },

因为我是新Vuejs。我认为子组件不会重新渲染。我希望每个人都能帮助我。非常感谢。

如何使用Vuejs使用条件命令重新呈现子列表复选框组件

0 个答案: