如何将输入数据附加到 Vue.js 中的道具

Question

我正在尝试使用 splice() 方法将用户输入字符串值添加到我的 Vue.js 组件中的 props 数组，但我得到一个空数组。有人可以帮忙找到一种方法将 props 数组与 select 标签中的用户输入值合并吗？

刀片：

<briefing-signup form_name="new-york-25.01.19-blog" :tags="['TT: i-nexus: Breakfast meeting - New York', 'Blog']" event="Hoshin/Strategy Execution Executive Briefing | New York, 29th Jan 2019" v-cloak></briefing-signup>

Vue 组件：

       <form>
                  <b-field label="Select a session">                       
                    <b-select placeholder="Which session?" 
                          v-model="form.session" expanded>
                      <option                           
                          value="1"
                          key="1">
                          Attend 1
                      </option>
                      <option                           
                          value="2"
                          key="2">
                          Attend 2
                      </option>                          
                    </b-select>                         
                  </b-field>                     

                 <button>Register</button>              
        </form>

Vue组件脚本部分：

<script>
export default {
    props: ['tags'],

    data() {
        return {             
            form: new Form({                    
                session: '',     
                tags: this.tags.splice(1, 0, this.session)               
            })                             
        }
    },      

    methods: {        

    }
}

Answer 1

最后搞定了。谢谢大家的回复和帮助。

这是适合我的代码 sn-p：

selectChange() { 
          var arrcount = this.form.tags;

          if(arrcount.length !== 2) {
            this.form.tags.splice(2,1);
          }
          this.form.tags.push(this.form.session);
        },

Answer 2

猜猜看，我设法通过在标签上设置 v-on:input="SelectChange" 将选择输入附加到血腥的道具数组中。然后在我的方法中我输入：

selectChange() {            
        this.form.tags = Array.isArray(this.form.tags.splice(1, 0, this.form.session)) ? this.form.tags : [];
      },

它有效，但现在的问题是，如果您选择多个选项，它会将每个选项附加到数组而不是替换它们。

Answer 3

您应该查看有关拼接的文档。

返回值

包含已删除元素的数组。如果仅删除一个元素，则返回一个包含一个元素的数组。如果没有元素被移除，则返回一个空数组。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

编辑：

只是改变

data() {
    return {             
        form: new Form({                    
            session: '',     
            tags: this.tags.splice(1, 0, this.session)               
        })                             
    }
},

到

data() {
    this.tags.splice(1, 0, this.session);
    return {             
        form: new Form({                    
            session: '',     
            tags: this.tags               
        })                             
    }
},

Answer 4

splice 在末尾提供元素，将元素添加到数组中，在您作为第一个参数提供的给定索引处，

如果您也提供第二个参数，而不是 0，它会替换元素。

但在任何情况下，它都会返回一个已删除元素的数组，在添加的情况下它是一个空数组。

所以当你这样做时：

this.tags.splice(1, 0, this.session)   

它返回一个空数组，你将一个空数组分配给 tags prop。

您可以通过以下方式解决问题：

export default {
    props: ['tags'],

    data() {
        return {             
            form: new Form({                    
                session: '',     
                tags: Array.isArray(this.tags.splice(1, 0, this.session)) ? this.tags : []               
            })                             
        }
    },      

    methods: {        

    }
}

但这是一个很好的解决方法，因为您的 this.session 仅存在于您正在创建的 Form 中。

更好的方法可能是：

data() {
  const form = new Form({ session: '', tags: this.tags});
  form.tags.splice(1, 0, form.session);   
  return {
    form
  }
},