Vue.js: как вызвать метод, когда есть изменение внутри дочернего компонента?


Vue.js: как вызвать метод, когда есть изменение внутри дочернего компонента?

17.09.2020 10:44:23 Просмотров 30 Источник

Как заставить действие на дочернем компоненте вызвать метод в Родительском компоненте? Как на моем примере. Я вставил компонент b-country-select в родительский компонент и хотел бы, чтобы он запускал метод test при изменении. Компонент загружается, но ничего не происходит, когда я делаю изменения. Модель tester2 работает.

Компонент: BCountrySelect.vue

<template>
    <select class="form-control v-model="country">
          <option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
    </select>
</template>

<script>
export default {
  data(){
      return {
          country: 0,
          countries: [{"id":1, "name":"USA"}, {"id":2, "name":"UK"} ]
      }
  },
  methods:{
      getCountries: function(){

        axios.get('/api/getCountries')
        .then(function (response) {
            this.countries = [{"id":0,"name":"- Select Country -"}].concat(response.data);
        }.bind(this));

      },
    },
    created: function(){
     // this.getCountries()
    }
  }
</script>

Родитель::

<template>
    <div class="container">
        <div class="form-group">
            <label>Country:</label>
            <b-country-select v-model="tester1" @change="test()"/>
        </div>
        <div class="form-group">
            <label>Country:</label>
            <select class='form-control' v-model="tester2" @change="test1()">
             <option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
            </select>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data(){
            return {
                tester1: 0,
                tester2: 0,
                countries: [{"id":1, "name":"USA"}, {"id":2, "name":"UK"} ]
            }
        },
        methods:{
            test: function() {
                console.log('hi there!');
            }
        }

    }
</script>

У вопроса есть решение - Посмотреть?

Ответы - Vue.js: как вызвать метод, когда есть изменение внутри дочернего компонента? / Vue.js: How to call a method when there is a change inside child component?

Boussadjra Brahim

17.09.2020 10:49:51

Испустите событие изменения следующим образом :

<select class="form-control v-model="country" @change="$emit('change',country)">

в родительской :

<b-country-select v-model="tester1" @change="test"/>

....

  test: function(country) {
                console.log('hi there! ', country);
            }
Помочь в развитии проекта:
Закрыть X