json - vue.js - 发送所选对象的另一个字段

Question

我在 vue 中有一个自动完成输入表单。当用户从建议中选择一种语言时，它会在输入字段中显示该语言的英文名称。

我想要做的是在用户提交表单时发送语言的 iso_639_1 代码。

语言数组：

{
    "iso_639_1": "tr",
    "english_name": "Turkish",
    "name": "Türkçe"
},
{
    "iso_639_1": "en",
    "english_name": "English",
    "name": "English"
},
...

由于english_name是输入的值，我只能发送。如何在向用户显示英文名称的同时提交语言的 iso 代码？

Answer 1

在这里查看我的 jsfiddle：https ://jsfiddle.net/3buxrm5y/2/

<div id="app">
  <select v-model="selected">
  <option v-for="(locale, index) in locales" :key="index" :value="locale.iso_639_1">{{ locale.english_name }}</option>
</select>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data() {
      return {
        selected: null,
        locales: [{
            "iso_639_1": "tr",
            "english_name": "Turkish",
            "name": "Türkçe"
          },
          {
            "iso_639_1": "en",
            "english_name": "English",
            "name": "English"
          },
        ]
      }
    }
  })

</script>

如您所见，您将选择/自动完成绑定到所选属性并显示english_name，而将值绑定到iso。