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

Question

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

Answer 1

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

对于textarea的输入值：

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

对于textarea的输出值：

• 我们可以将处理程序绑定到Bootstrap-Vue's textarea 发出的事件之一，在这种情况下我使用update，因为这就是BV uses for v-model
• 该处理程序会将文本转换为我们的数组：
  • 将字符串拆分为逗号数组：value.split(",")
  • 修剪每个元素以删除前面/后面的空格：.map(item => item.trim())
  • 然后过滤掉任何空元素：.filter(item => item.length > 0)

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

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

---

功能示例

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>