Vue Bootstrap 与 textarea 分隔的字符串数组？

Question

我需要从 vue bootstrap 中的文本区域中提取字符串并将它们保存到数组中。这些是数字和字母字符串，当有人输入逗号时，它们会分开。如果我们能做到这一点，那么奖励是 'pills' 或标签添加输入字段中的标签。阅读文档找不到专门针对此的任何内容，非常感谢您的帮助。

Answer 1

拆分应该不会太难，只需手动绑定输入并解析文本区域的输出，为每个适当地转换数据数组。

对于文本区域的输入值：

将数组元素连接在一起，, 分隔每个元素
我们可以使用list.join(', ')来完成这个

对于文本区域的输出值：

我们可以将处理程序绑定到 Bootstrap-Vue's textarea emits, in this case I used update since that's what BV uses for v-model
该处理程序会将文本转换为我们的数组：
- 用逗号将字符串拆分成一个数组：value.split(",")
- Trim 每个元素删除前面/结尾的空格：.map(item => item.trim())
- 然后过滤掉所有空元素：.filter(item => item.length > 0)

此输入/输出逻辑会将文本区域的内容适当地转换为数组，反之亦然。

至于药丸，我不确定我在下面所做的是否正是您要找的，但我想我会试一试。

运行示例

new Vue({
  el: '#app',
  data() {
    return {
      listArr: ["test", "1", "2"],
    }
  },
  computed: {
    arrToText() {
      return this.listArr.join(', ');
    },
  },
  methods: {
    textToArr(value) {
      this.listArr = value.split(",")
        .map(item => item.trim())
        .filter(item => item.length > 0);
    },
  },
});

<!-- Set up Vue and Bootstrap-Vue for snippet -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" /><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /><script src="//unpkg.com/vue@2/dist/vue.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-form-textarea :value="arrToText" class="mb-2" @update="textToArr"></b-form-textarea>
  <h3>
    <b-badge v-for="(item, index) in listArr" :key="index" pill variant="primary" class="mr-2">{{ item }}</b-badge>
  </h3>
</div>

Vue Bootstrap 与 textarea 分隔的字符串数组？

Vue Bootstrap Array of strings comma seperated from text area?

textarea

vue.js

bootstrap-vue

运行示例