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

时间:2018-06-13 11:05:08

标签: json vue.js

我在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代码?

1 个答案:

答案 0 :(得分: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>

如您所见,您将select / autocomplete绑定到selected属性并显示english_name,而您将值绑定到iso。