Vue公司2 - click事件

Question

后的数组元素的更新值是否有可能，当我火updateCountry方法（在国家名单组件定义），更新值（如果成功调用）该数组元素，这样该按钮就会根据country.show的值动态改变文本的值？

这是Vue的代码，我目前所面对的：

Vue.component('country-list', { 
    template: ` 
    <tbody> 
     <tr is="country" v-for="(country, index) in countries.data"> 
      <td> 
       <input 
        type="text" 
        name="name" 
        class="form-control country-name" 
        :value="country.name" 
       > 
      </td> 
      <td> 
       <select name="show" class="form-control country-show" :value="country.show"> 
        <option value="0">No</option> 
        <option value="1">Yes</option> 
       </select> 
      </td> 
      <td> 
       <input 
        type="text" 
        name="order" 
        class="form-control country-order" 
        :value="country.order" 
       > 
      </td> 
      <td> 
       <button class="btn btn-primary"> 
        {{ country.show ? "Hide" : "Show" }} 
       </button> 
       <button class="btn btn-success" 
        @click="updateCountry" 
        :data-id="country.id">Update</button> 
      </td> 
     </tr> 
    </tbody> 
    `, 

    props: ['countries'], 

    methods: { 

     updateCountry(event) { 

      let self   = this; 

      let countryID = event.target.dataset.id; 

      let parent  = event.target.closest('.parent'); 

      let countryName = parent.getElementsByClassName('country-name')[0].value; 

      let countryOrder = parent.getElementsByClassName('country-order')[0].value; 

      let countryShow = parent.getElementsByClassName('country-show')[0].value; 

      axios.post('/country/insert', { 
       id: countryID, 
       name: countryName, 
       order: countryOrder, 
       show: countryShow 
      }) 
      .then(function (response) { 
       console.log(self); 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 

     } 

    } 
}); 

Vue.component('country', { 
    template: `<tr class=parent><slot></slot></tr>` 
}); 


Vue.component('pagination-list', { 

    template: ` 
     <tfoot> 
      <tr align="center"> 
       <nav aria-label="Page navigation"> 
        <ul class="pagination"> 
         <li :class="countries.current_page == 1 ? 'disabled' : ''"> 
          <a 
           :class="countries.current_page == 1 ? 'disabled' : ''" 
           :href="countries.current_page == 1 ? '#' : countries.prev_page_url" 
           @click.prevent="pagination(countries.current_page - 1)" 
           aria-label="Previous"> 
           <span aria-hidden="true">&laquo;</span> 
          </a> 
         </li> 

         <li v-for="i in countries.last_page" 
         :class="countries.current_page == i ? 'active' : ''" 
         > 
          <a 
           :href="countries.current_page == i ? '#' : '/admin/countries?page='+i" 
           @click.prevent="pagination(i)" 
          >{{i}}</a> 
         </li> 

         <li> 
          <a 
           :href="countries.next_page_url" 
           @click.prevent="pagination(countries.current_page + 1)" 
           aria-label="Next"> 
           <span aria-hidden="true">&raquo;</span> 
          </a> 
         </li> 
        </ul> 
       </nav> 
      </tr> 
     </tfoot> 
    `, 

    props: ['countries'], 

    methods: { 
     pagination(page) { 
      this.$parent.getCountries(page); 
     } 
    } 
}); 


let App = new Vue({ 

    el: '#app-container', 

    data: { 
     countries: [] 
    }, 

    created() { 
     this.getCountries() 
    }, 

    methods: { 

     getCountries(page) { 

      let self = this; 

      let getParam = page ? '?page=' + page : ''; 

      axios.get('/admin/countries' + getParam) 
       .then(function (response) { 
        self.countries = response.data; 
       }) 
       .catch(function (error) { 
        console.log(error); 
       }); 

     }, 

     filterCountries(event) { 

      let name = event.target.value; 

      let self = this; 

      if(name.length > 2) { 

       axios.get('/country/search', { 
        params: { 
         name: name 
        } 
       }) 
       .then(function (response) { 
        self.countries = response.data; 

        console.log(self.countries); 
       }) 
       .catch(function (error) { 
        console.log(error); 
       }); 

      } 

      if((event.keyCode === 8 && name.length === 2) || !name.length){ 
       this.getCountries(); 
      } 
     } 
    } 

}) 

Answer 1

一样，如果你使用v-model，它会削减一些你不得不做的事情，此代码会更加Vue公司。例如，如果您更新country-list模板是这样的：

<tbody> 
    <tr is="country" v-for="(country, index) in countries.data" :key="country"> 
     <td> 
      <input 
       type="text" 
       name="name" 
       class="form-control country-name" 
       v-model="country.name" 
      > 
     </td> 
     <td> 
      <select name="show" class="form-control country-show" v-model="country.show"> 
       <option value="0">No</option> 
       <option value="1">Yes</option> 
      </select> 
     </td> 
     <td> 
      <input 
       type="text" 
       name="order" 
       class="form-control country-order" 
       v-model="country.order" 
      > 
     </td> 
     <td> 
      <button class="btn btn-primary"> 
       {{ country.show ? "Hide" : "Show" }} 
      </button> 
      <button class="btn btn-success" 
       @click="updateCountry(country)" 
       :data-id="country.id">Update</button> 
     </td> 
    </tr> 
</tbody> 

然后你updateCountry方法可能只是这个

updateCountry(country) { 
    axios.post('/country/insert', country) 
    .catch(err => //do something on error) 
} 

因为使用v-model，所有值都已经本地更新，和你只需将值发布到服务器即可。由于您将实际的country传递给updateCountry方法，因此不需要从输入中获取值。

另请注意，我将:key="country"添加到您的v-for，因为迭代组件时需要密钥。如果你有一个country.id，那就更好了。但是，我不明白你为什么需要country组件。这一点完全没有必要。