如何在 Vue JS 中连接按钮并使用其选项进行选择

Posted 2023-02-16

【中文标题】如何在 Vue JS 中连接按钮并使用其选项进行选择

【英文标题】：How can I connect buttons and select with its options in Vue JS

【发布时间】：2017-10-26 14:15:49

【问题描述】：

我被困住了，伙计们。也许我的问题有简单的解决方案。请帮我。 这就是问题所在。

我有 5 种可能的选项可供选择。假设 [a, b, c, d, e]

我的布局是两个按钮和选择下拉菜单。 换句话说，我给用户两种可能性：

点击两个按钮之一或从列表中选择。

所以模板有点儿

<button> A <button>
<button> B <button>
<select v-model="selected">
  <option :value="i" v-for="i in list">i</option>
</select> 

在我的脚本中

data () 
      return 
         list: ['c', 'd', 'e']
      
    

如何将这三个元素合二为一。我可以以某种方式使用 v-model 吗？现在的原因，我可以从列表中选择选项。那我该怎么办。如果我将 @click 事件添加到按钮，它们应该处理什么？

我想创建计算值，比如检查selected 是否未定义或等于''，那么选项是selected。但是为了绑定按钮点击事件，我应该创建方法来处理它们的状态，比如

data () 
      return 
         list: ['c', 'd', 'e'],
         a: false,
         b: false
      
    ,
methods: 
  handleA () 
    this.a = true
    this.b = false     
  ,
  handleB () 
    this.b = true
    this.a = false     
  

然后每次点击都会将false更改为true，此外还需要一个逻辑来只保留一个true状态：a（按钮A），b（按钮B) 或selected。感觉太不真实了。在我看来，我让事情变得更难了。必须有一个简单的方法。

【问题讨论】：

那么，单击按钮一，值为 A，单击二，值为 B，否则从列表中选择 C、D 或 E？

是的，值只能是这5个选项之一。

【参考方案1】：

我会推荐一个组件。构建支持v-model的组件。

Vue.component("picker",
  props:["value"],
  data()
    return 
      list:["c","d","e"],
      currentValue: this.value,
      selectedValue: ""
    
  ,
  template:`
    <div>
      <button @click="currentValue = 'a'">A</button>
      <button @click="currentValue = 'b'">B</button>
      <select @change="currentValue = $event.target.value" v-model="selectedValue">
          <option value="">Select a value</option>
          <option v-for="item in list" :value="item" :key="item">item</option>
      </select>
    </div>
  `,
  watch:
    currentValue(newValue)
      if (!this.list.includes(newValue))
        this.selectedValue = "" 

      this.$emit('input', newValue)
    
  
)

new Vue(
  el:"#app",
  data:
    pickedValue: null
  
)

Example.

【讨论】：

因此，我可以忽略v-model，并根据发生的每个事件、点击或选项选择简单地分配值@click="currentValue = ' _somevalue_' 或$event.target.value。它对我有用，但我真的很想得到其余的代码。 currentValue: this.valuewatch: currentValue(newValue) this.$emit('input', newValue)我们正在关注currentValue的每一个变化。当它改变时，我们发出名为 input 的事件，并传递给它的监听器newValue。我们什么时候收听这个事件？为什么我们需要在这里使用这个词currentValue = this.value

@KarénMarkosyan 您询问的所有代码都是为了让您可以在组件的 outside 中使用v-model。 v-model 的工作方式是将 value 属性传递给您的组件并侦听 input 事件。 currentValue: this.value 的存在是为了在组件初始化时，如果v-model 传入的表达式已经有值，那么组件就会被初始化为该值。

@KarénMarkosyan 基本上this documentation 涵盖了所有这些。

感谢您的回答和澄清。

【参考方案2】：

基本问题是，如果您在选择中 v-model 并且绑定到 v-model 的变量获得的值不在您的选项中，则该变量将重置为 null。

你必须想出一些特殊情况的处理来解决这个问题。一种方法是将选择列表设置为 v-model 一个可设置的计算值，它将未列出的值解释为 null 并将非 null 值写入 selected 数据项。

new Vue(
  el: '#app',
  data: 
    selected: null,
    list: ['c', 'd', 'e']
  ,
  computed: 
    proxySelected: 
      get() 
        return this.list.includes(this.selected) ? this.selected : null;
      ,
      set(newValue) 
        if (newValue) 
          this.selected = newValue;
        
      
    
  
);

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
  <button @click="selected = 'a'"> A </button>
  <button @click="selected = 'b'"> B </button>
  <select v-model="proxySelected">
    <option :value="i" v-for="i in list">i</option>
  </select>
  Selected value: selected
</div>

【讨论】：

我明白了。最后，我将值从按钮传递到下拉列表，然后v-model 处理它的值。但是，不希望在下拉列表中看到我的 a 和 b 选项。有趣的是，当您单击任何按钮时，它的值将被添加到列表中，并且新添加的选项出现在顶部。无论如何，这是一个可行的解决方案，感谢您的回答。