Question

我有一个包含###的字符串，我将替换为数组值。现在，我想将它们与组件一起使用，创建了该组件并且它可以工作，但是我不知道如何在字符串中使用它。我不想手动包装它们，因为我不知道字符串的样子，它可以有多个###。如果它有2个###，则选项将具有2个子数组。

有什么更好的方法？

代码：https://jsfiddle.net/tsobh4nu/

Vue.component('opt', {
  template: `<label>
                <span class="bold" v-for="(str,idx) in options">
                     {{str + " / "}}
                </span>
             </label>`,
  props:{options: Array}
})

new Vue({
  el: '#app',
  data: {
    str: "I have ### and you have a ###.",
      options: [
        ['AAA', 'BBB', 'CCC'],
        ['XXX', 'YYY', 'ZZZ']
      ]
  },
  computed:{
  	replacedStr(){
    	let newStr = this.str;
      this.options.forEach(option=>{
      	newStr = newStr.replace('###',this.concatenateOptions(option));
      })
      return newStr;
    }
  },
  methods: {
    concatenateOptions(strArr) {
      let separator = "";
      let strOptions = "";
      strArr.forEach(word => {
        strOptions += separator  + word;
        separator = " / ";
      });
      return strOptions;
    }
  }
})

.bold {
  font-weight: bold
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <p>I want something like this, but using components: </p>
  {{replacedStr}}
  <br>
  <hr>
  My Components:<br>
  <opt :options="options[0]"></opt>
  <br>
  <opt :options="options[1]"></opt>
</div>

非常感谢。

Answer 1

您需要向上移动食物链！您将竭尽全力绕过vue的优点。您的data.string是一个模板，而您的###是一个不太有意义的占位符，那么您必须自己完成这项工作。

您不能使用Vue的模板系统吗？您的concatenateOptions方法可以替换为Array.join（）。

Answer 2

这比较笼统，但我希望它能对某人有所帮助。在模板中添加动态组件：love2d。

然后添加一个计算方法：

wiki

其中<component v-bind:is="processedHtml"></component>是您的自定义组件，而computed: { processedHtml () { let html = this.html.replace('[Placeholder]', '<my-component></my-component>'); return { template: '<div>' + html + '</div>' } } }是您的HTML内容，其中包含占位符<my-component>。

返回具有一个根节点的元素很重要。这就是为什么退货用this.html包装的原因。

阅读有关此问题here in my blog的更多高级教程。例如，将道具传递到[Placeholder]

Answer 3

我刚刚遇到了同样的问题。我有一个需要显示项目当前计数的元素。当前的数量来自商店，并且在不断变化。我使用了v-text。我知道这是针对特定情况的，但是希望它可以帮助某人。

<P id="results_count" v-text="current_count"></P>

，在组件的数据部分中，我有一个名为current_count的属性，该属性通过方法进行了更新。

如何使用组件替换字符串（VUE）

3 个答案: