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

Question

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

这是一个demo

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63151606170a051a23524d564d5257" rel="noreferrer noopener nofollow">[email protected]</a>/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>

另外取消时如何将输入值和数组分别设置为空字符串和空数组。谢谢。我昨天问过，但不得不删除，因为我无法找出确切的问题。

Answer 1

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