Vue公司2 - 让clossest元素与类

Question

我有我的模板如下：

<tbody> 

    @foreach ($countries as $country) 
     <tr class="parent"> 
      <td><input class="form-control" type="text" value="{{ $country->name }}"></td> 
      <td>{{ $country->show ? 'Yes' : 'No' }}</td> 
      <td><input class="form-control" type="number" value="{{ $country->order }}"></td> 

      <td> 
       <button class="btn btn-primary">{{ $country->show ? "Hide" : "Show" }}</button> 
       <button class="btn btn-success" @click="updateCountry">Update</button> 
      </td> 
     </tr> 
    @endforeach 

</tbody> 

这是Vue公司代码：

import Vue from 'vue' 

let App = new Vue({ 

    el: '#app-container', 

    data: { 

    }, 

    methods: { 
     filterCountries() { 

     }, 

     updateCountry(event) { 
      console.log(event.target.parentElement); 
     } 
    } 

}) 

到目前为止，我可以得到一个参考父母（这是包含按钮的td）。是否有可能得到类父（类似于jquery）最接近的元素，然后获取包含在父元素中的输入元素的值？

Answer 1

你所描述的是一种非常非Vue的方式去做的事情。我会做的是定义一个组件。我意识到，这并不完全适用于你的代码，因为它是，但忍受着我。然后

console.clear() 
 

 
Vue.component("country",{ 
 
    props:["country"], 
 
    template: "#country-template", 
 
    data(){ 
 
    return { 
 
     internalCountry: this.country 
 
    } 
 
    }, 
 
    methods:{ 
 
    updateCountry(){ 
 
     console.log(this.internalCountry) 
 
    } 
 
    } 
 
}) 
 

 
let App = new Vue({ 
 

 
    el: '#app-container', 
 

 
    data: { 
 
     country:{ 
 
     name:"Germany", 
 
     order: 1, 
 
     show: true 
 
     } 
 
    }, 
 

 
    methods: { 
 
     filterCountries() { 
 

 
     }, 
 

 
     updateCountry(event) { 
 
      console.log(event.target.parentElement); 
 
     } 
 
    } 
 

 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 

 
<div id="app-container"> 
 
    <table> 
 
    <tbody> 
 
     <tr is="country" :country="country"></tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 

 

 
<template id="country-template"> 
 
    <tr class="parent"> 
 
    <td><input class="form-control" type="text" v-model="internalCountry.name"></td> 
 
    <td>{{ internalCountry.show ? 'Yes' : 'No' }}</td> 
 
    <td><input class="form-control" type="number" v-model="internalCountry.order"></td> 
 

 
    <td> 
 
     <button class="btn btn-primary">{{ internalCountry.show ? "Hide" : "Show" }}</button> 
 
     <button class="btn btn-success" @click="updateCountry">Update</button> 
 
    </td> 
 
    </tr> 
 
</template>

你的模板将成为这样的事情

@foreach ($countries as $country) 
    <tr is="country" :country="{{$country}}"></tr> 
@endforeach 

个别国家传递到组件的属性。在组件内部，代码使用v-model将数据绑定到内部国家/地区数据，因此它们自动已更新。那么，当你需要在updateCountry中做点什么时，你的已经有了的值。