时间戳

首页 > 解决方案 > VueJs Vuetify 点击表格行事件未读取项目

vue.js - VueJs Vuetify 点击表格行事件未读取项目

问题描述

我是 VueJs 和 Vuetify 的新手，我有一个脚本可以从 Json 读取数据并将其显示到 Table.is 词汇表类型的应用程序中。我可以选择不同的语言来显示在表格中。问题是，当我单击一行时，我想在弹出窗口（警报）中显示项目信息。我所做的根本不起作用，只是显示警报弹出窗口但没有信息。

Json 的格式为：

{"glossary":[
{"id":2,"English":{"term":"contact","definition":"the state of physical touching"},"Vietnamese":{"term":"tiếp xúc"},"Simplified_Chinese":{"term":"接触"},"Arabic":{"term":"ملامسة"},"Swahili":{"term":"mgusano"}}]}





    <v-data-table dense light :headers="selectedHeaders" :item-key="id" @click:row="showAlert(item)" :items="glossary.glossary" class="elevation-1" :single-expand="true" :disable-sort=true :search="search">
     <template #item.ar.term="{item}">
      <div style="text-align:right;">
       <span>{{item.ar.term}}</span>
      </div>
     </template>
</v-data-table>

<script>
import About from '@/views/About.vue'
import json from '@/assets/data/glossary.json'
export default {
  name: 'App',
  components: { About },
  data () {
    return {
      publicPath: process.env.BASE_URL,
      glossary: json,
      search: '',
      value: [],
      expanded: [],
      selectedHeaders: [],
      dialog: false,
      headers: [
        { text: 'English', value: 'English.term' },
        { text: 'Vietnamese', value: 'Vietnamese.term' },
        { text: 'Arabic', value: 'Arabic.term' },
      ]
    }
  },
  methods: {
    filter(value, search, item) {
      return value != null &&
        search != null &&
        typeof value === 'string' &&
        value.toString().toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) !== -1
    },
    showAlert(a){
      if (event.target.classList.contains('btn__content')) return;
      alert('Extra Information:! \n'+this.English.term );
      console.log(this);
    }
  watch: {
    value(val) {
      this.selectedHeaders = val ;
    }
  },
  created() {
    this.selectedHeaders = this.headers;
  }
}
</script>

标签： vue.jsvuetify.js

解决方案

您没有使用a哪个是通过的项目。this只返回 vue 对象。你可能想要的是这个

 showAlert(a){
      if (a.target.classList.contains('btn__content')) return;
      alert('Extra Information:! \n'+a.English.term );
      console.log(a);
    }

这是我发现的一个 codepen，它可以帮助您更好地理解它https://codepen.io/nsiggel/pen/KRdGgE。注意：我没有写这个 codepen。

推荐阅读