javascript - Vuejs 在元素选择上填充输入字段值

Question

我不确定我的说法是否正确。我有一个非常简单的vuejs应用程序(我几天前才开始学习vue，所以我对vue的了解非常有限)。

我有一个充当搜索框的输入字段。当我们提供一些文本输入时，它会触发 v-on:blur 事件来调用函数。然后它会设置显示在搜索框正下方的建议。

我想要实现的是，当单击任何一个 anchor 标记(从搜索建议中)时，两个新的输入框应该自动填充搜索建议中的值。

{name: 'Some Name', state: 'Some State'}

代码的一个非常简单和精简的版本是 https://jsfiddle.net/dfhpj08g/

new Vue({
  el: "#app",
  data: {
    suggestions: [],
    showSuggestions: false,
  },
  methods: {
    suggest() {
      // this is dynamically generated via ajax
      this.suggestions = [{
          name: 'A',
          state: 'OH'
        },
        {
          name: 'B',
          state: 'OR'
        },
      ];
      this.showSuggestions = true;
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-on:blur="suggest" placeholder="search">
  <div v-show="showSuggestions">
    <span>Did you mean</span>
    <li v-for="s in suggestions">
      <a href="#">
        {{s.name}} - ({{s.state}})
      </a>
    </li>
  </div>
  <input type="text" name="name" placeholder="name">
  <input type="text" name="state" placeholder="state">
</div>

Answer 1

如果您想将值插入名称和州字段，我建议使用 v-model对它们进行处理并在组件中声明相应的数据。这样，您可以简单地使用 this.name 设置它们。和this.state :

data: {
  suggestions: [],
  showSuggestions: false,
  name: '',
  state: ''
},

使用v-model绑定(bind)name和state数据到您的输入元素:

<input type="text" name="name" placeholder="name" v-model="name">
<input type="text" name="state" placeholder="state" v-model="state">

您可以将点击处理程序绑定(bind)到每个 <a>元素，以便您可以传递单击建议的索引。这将允许您执行 this.suggestion[i]检索数据:

<li v-for="(s, i) in suggestions" v-bind:key="i">
  <a href="#" v-on:click.prevent="suggestionSelected(i)">
    {{s.name}} - ({{s.state}})
  </a>
</li>

然后，在您的方法中，您可以创建一个新函数 suggestionSelected ，它接受建议的索引为 i 。这样，您就可以使用括号语法来访问所选建议:

suggestionSelected(i) {
  this.name = this.suggestions[i].name;
  this.state = this.suggestions[i].state;
}

请参阅下面的概念验证示例:

new Vue({
  el: "#app",
  data: {
    suggestions: [],
    showSuggestions: false,
    name: '',
    state: ''
  },
  methods: {
    suggest() {
      // this is dynamically generated via ajax
      this.suggestions = [{
          name: 'A',
          state: 'OH'
        },
        {
          name: 'B',
          state: 'OR'
        },
      ];

      this.showSuggestions = true;
    },
    suggestionSelected(i) {
      this.name = this.suggestions[i].name;
      this.state = this.suggestions[i].state;
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-on:blur="suggest" placeholder="search">
  <div v-show="showSuggestions">
    <span>Did you mean</span>
    <li v-for="(s, i) in suggestions" v-bind:key="i">
      <a href="#" v-on:click.prevent="suggestionSelected(i)">
        {{s.name}} - ({{s.state}})
      </a>
    </li>
  </div>
  <input type="text" name="name" placeholder="name" v-model="name">
  <input type="text" name="state" placeholder="state" v-model="state">

</div>