Vue 2 - 使用类获取最接近的元素 [英] Vue 2 - get clossest element with a class

问题描述

我的模板中有以下内容:

@foreach ($countries 作为 $country)<tr class="parent"><td><input class="form-control" type="text" value="{{ $country->name }}"></td><td>{{ $country->show ?'是' : '否' }}</td><td><input class="form-control" type="number" value="{{ $country->order }}"></td><td><button class="btn btn-primary">{{ $country->show ?"隐藏" : "显示" }}</button><button class="btn btn-success" @click="updateCountry">更新</button></td></tr>@endforeach</tbody>

这是Vue代码:

从'vue'导入Vue让 App = 新 Vue({el: '#app-container',数据: {},方法: {过滤器国家(){},更新国家(事件){console.log(event.target.parentElement);}}})

到目前为止，我可以获得对父级的引用(即包含按钮的 td).是否可以通过类parent(类似于jquery)获取最接近的元素，然后获取父元素中包含的输入元素的值?

解决方案

您所描述的是一种非常非 Vue 的处理方式.我要做的是定义一个组件.我意识到这并不完全适用于您的代码，但请耐心等待.

console.clear()Vue.component("国家",{道具:[国家"]，模板:#国家模板"，数据(){返回 {内部国家:this.country}},方法:{更新国家(){console.log(this.internalCountry)}}})让 App = 新 Vue({el: '#app-container',数据: {国家:{name:"德国",订单:1，显示:真实}},方法: {过滤器国家(){},更新国家(事件){console.log(event.target.parentElement);}}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script><div id="app-container"><表格><tr is="country" :country="country"></tr></tbody>

<模板 id="国家模板"><tr class="parent"><td><input class="form-control" type="text" v-model="internalCountry.name"></td><td>{{ internalCountry.show ?'是' : '否' }}</td><td><input class="form-control" type="number" v-model="internalCountry.order"></td><td><button class="btn btn-primary">{{ internalCountry.show ?"隐藏" : "显示" }}</button><button class="btn btn-success" @click="updateCountry">更新</button></td></tr></template>

你的模板就会变成这样

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

各个国家/地区作为属性传递到组件中.在组件内部，代码使用 v-model 将数据绑定到内部国家/地区数据，以便自动更新它们.然后，当您需要在 updateCountry 中执行某些操作时，您已经拥有这些值.

I am having the following in my template:

<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>

And this is the Vue code:

import Vue from 'vue'

let App = new Vue({

    el: '#app-container',

    data: {

    },

    methods: {
        filterCountries() {

        },

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

})

So far I can get a reference to the parent (which is the td that contains the buttons). Is it possible to get the closest element with the class parent (similar to the jquery) and then get the values of the input elements contained in the parent element?

解决方案

What you are describing is a very non Vue way to go about things. What I would do is define a component. I realize that this doesn't work completely with your code as it is, but bear with me.

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>

Your template would then become something like this

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

The individual countries are passed into the component as properties. Inside the component, the code uses v-model to bind the data to the internal country data so they are automatically updated. Then, when you need to do something in updateCountry you already have the values.

这篇关于Vue 2 - 使用类获取最接近的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！