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

使用javascript的拆分功能从\n拆分文本

例如

var string_from_textarea = `hello
world`;

var array_of_lines = string_from_textarea.split('\n');

使用上述代码，您将在array_of_lines变量中得到一个行数组。

Answer 2

在文本区域上使用.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>

@Path({id}/{type})

从文本框中分割行并将其显示在下拉菜单W / Vue JS中

2 个答案: