VueJS 从列表中选择对象并用函数显示答案

【问题标题】：VueJS select object from list and display with functionVueJS 从列表中选择对象并用函数显示
【发布时间】：2020-09-16 09:24:50
【问题描述】：

我需要获取显示在列表中的我单击的元素。并通过 index.html 上的邮件列表标签在我的 vue 实例上的方法上打印此元素

所以我有一个 Vue 组件，它迭代 json 对象并且只从它的每个元素中打印两个属性：

Vue.component('mail-list', {
  props: ['inboxmail'],
  methods: {
    selectmail: function(){
      this.$emit('selectmail', this.mail);
    }

  },
  template:
  `
  <div>
    <ul>
      <li v-for="i in inboxmail" @click="selectedmail">
      {{i.from}}:{{i.subject}}
      </li>
    </ul>
  </div>
  `
  });

运行后，我的 index.html 上显示了两个元素：

test1@test.com:嗨
test2@test.com：你好吗？

我想单击这两个元素之一并获取我单击的那个。然后通过 index.html 中的邮件列表标签将其发送到名为 setSelectedMail 的 vue 方法

index.html:

<div id="app">
        <mail-list v-bind:inboxmail="inbox" @selectmail="setSelectedMail($event)"></mail-list>
</div>

最后，这是我要从中获取所选邮件的 vue 实例：

let options = {
  el: "#app",
  data: {
    inbox: '',
    selectedMail:{}
  },
  methods: {
      setSelectedMail: function(mail){
          this.selectedMail = mail;
      }

  } //end methods
 }
//ViewModel (vm)
let vm = new Vue(options);

我做错了什么？

【问题讨论】：

你试过@click="selectedmail(id)"吗？
@Deda 你是对的！谢谢！但是我也错过了将值传递给函数： selectmail: function(value) { this.$emit("selectmail", value); }

标签： javascript html vue.js emit vue-props

【解决方案1】：

检查这个。您的代码中的一些更正。

@click="selectmail(i.from)"

methods: {
        selectmail: function(value) {
          this.$emit("selectmail", value);
        }
      }

在codesandbox 或Github 中使用您的代码进行演示。

<!-- Complete code -->

<!-- MailList -->

<template>
  <div>
    <ul>
      <li v-for="i in inboxmail" @click="selectmail(i.from)" 
      v-bind:key="i.from">{{i.from}}:{{i.subject}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "MailList",
  props: ["inboxmail"],
  methods: {
    selectmail: function(value) {
      this.$emit("selectmail", value);
    }
  }
};
</script>

<!-- App.Vue -->

<template>
  <div id="app">
    <mail-list v-bind:inboxmail="inbox" 
      @selectmail="setSelectedMail($event)">
    </mail-list>

    Selected: {{selectedMail}}
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import MailList from "./components/MailList";

export default {
  name: "App",
  components: {
    HelloWorld, MailList
  },
  data: function(){
    return {
      inbox: [{
        from: 'test1@test.com',
        subject: 'Hi'
      },{
        from: 'test2@test.com',
        subject: 'How are you?'
      }],
      selectedMail: {}
    };
  },
  methods: {
    setSelectedMail: function(mail) {
      this.selectedMail = mail;
    }
  } //end methods
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

【讨论】：

像魅力一样工作！感谢您的帮助！