javascript - 从文本框中拆分行并将它们显示在带有 Vue JS 的下拉菜单中

Question

<div id="dropDown" class="dropdown">
    <button v-on:click.prevent="showDropDown = !showDropDown" class="button dropdown-trigger">
        <div>Keywords</div>
    </button>
    <div v-if="showDropDown">
        <ul>
            <li v-for="(key, index) in skags">
                <a href="#">{{key.keyword}}</a>
            </li>
        </ul>
     </div>

这就是我获得下拉菜单的方式，它从对象数组中提取关键字，其中每个对象都应包含来自用户的每一行输入。用户的输入位于 textarea 中，我希望能够获取每一行输入并将其放置在一个对象中。我不确定如何识别换行符然后将其拆分以单独推送它们。本质上，有一个框供用户输入，他们被告知通过按回车键开始新行来分解输入，我希望每一行输入都是下拉菜单中的 li 元素.任何输入都会很棒!

Answer 1

在文本区域上使用 v-model，然后使用 .split('\n') 从每一行创建一个数组:

new Vue({
  el: '#app',
  data() {
    return {
      content: ''
    }
  },
  computed: {
    items() {
      const items = this.content.split('\n')
      return this.content !== '' && !!items.length ? items : []
    }
  }
})

.vanilla {
  border: 1px solid black;
  border-radius: 2px;
  padding: 1rem;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
      <h4>Vanilla JS</h4>
      <hr class="my-3"/>
      <select name="vanilla" class="vanilla">
        <option disabled selected>-- Type in the box below to create options --</option>
        <option v-for="option in items" :value="option">{{ option }}</option>
      </select>
      </v-container>
      <v-container>
        <h4>Vuetify</h4>
        <hr class="my-3"/>
        <v-select :suffix="`${items.length} options`" clearable persistent-hint :items="items" label="Type in the box below to create options" outline></v-select>
        <v-textarea outline name="input-7-4" label="Enter one option per line" v-model="content"></v-textarea>
      </v-container>
    </v-content>
  </v-app>
</div>