Vue 2 - 使用类获取最接近的元素

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）。是否可以通过 parent 类（类似于 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 中做某事时，您已经拥有这些价值观。