时间戳

首页 > 解决方案 > 如何在 VueJS 中创建字符串数组？

javascript - 如何在 VueJS 中创建字符串数组？

问题描述

我正在使用 VueJS 和 Vuetify 创建一个可以在文本字段中接受一些字符串的模式。现在我想做的是将输入字符串推入一个数组on click中。因此，假设我输入一些内容并单击创建结果数组，['inputValue1']但是如果我通过用逗号分隔添加另一个值，则结果数组应该是['inputValue1', 'inputValue2']我得到的['inputValue1', 'inputValue1' 'inputValue2']。所以应该将新值推送到新索引，而不是与最后一个值相加。

这是一个演示

new Vue({
  el: "#app",
  data() {
    return {
      dialog: false,
      inputValue: "",
      stringArray: []
    };
  },
  methods: {
    createArray() {
      if (this.inputValue !== "") {
        this.stringArray.push(this.inputValue);
        console.log(this.stringArray);
      }
    },
    closeDialog() {
      this.dialog = false;
      this.inputValue = "";
      this.stringArray = [];
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-layout justify-center>
      <v-flex>
        <v-btn color="primary" @click="dialog=!dialog"> Click Me </v-btn>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" width=350>
      <v-card>
        <v-card-title primary-title>
          Create Array
        </v-card-title>
        <v-card-text>
          <span class="title">How to create Array of Strings </span>
          <v-layout justify-center>
            <v-flex xs11>
              <v-text-field v-model="inputValue"></v-text-field>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions class="mt-5">
          <v-spacer></v-spacer>
          <v-btn @click="closeDialog">CLOSE</v-btn>
          <v-btn @click="createArray" :disabled="this.inputValue === ''" color="primary">CREATE</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</div>

另外on Cancel，如何将输入值和数组分别设置为空字符串和空数组。谢谢你。我昨天问过它，但由于我无法弄清楚确切的问题，所以不得不删除。

标签： javascriptarraysvue.js

解决方案

您的“createArray”方法未附加到任何点击事件。除此之外，代码是正确的。:)

推荐阅读