在 Vue.JS 中动态创建锚标签

Question

我有一个 JS 对象，我需要能够从中创建 html 元素并在 Vue.JS 中呈现它。到目前为止，我的解决方案是获取对象，将 HTML 元素创建为字符串，然后将其添加到模板中。然而，虽然这能正确显示元素，但锚标签是不可点击的。

<template>
  <div>
    <template v-if="elementData">
      <ul>
        <li v-for="(value, key) in elementData" :key="key">
          <div v-html='value'></div>
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
const about = [
  [
    'This is normal text ',
    {
      text: 'im a link',
      link: 'https://www.stack-overflow.com',
    },
    ', is not bad ',
  ],
  [
    'More text and text',
  ],
];

export default {
  data() {
    return {
      elementData: [],
    };
  },
  mounted() {
    this.setData();
  },
  methods: {
    setData() {
      this.elementData = about.map((paragraph) => {
        let pElement = '<p>';
        paragraph.forEach((part) => {
          if (typeof part === 'object') {
            const link = `<a target="_" :href="${ part.link }">${ part.text }</a>`;
            pElement = pElement.concat(link);
          } else pElement = pElement.concat(part);
        });
        pElement.concat('</p>');
        return pElement;
      });
    },
  },
};
</script>

问题可能来自我没有创建实际的 html 元素（例如在使用原版 JS 的 document.createElement('div') 时）。但是，我不知道如何做到这一点 Vue.JS。

Answer 1

您可以使用Vue's conditional rendering 来实现相同的目标，而不是手动操作 DOM。看看下面这个解决方案：

<template>
  <div>
    <template v-if="elementData">
      <ul>

        <li v-for="(paragraph, key) in elementData" :key="`paragraph-${key}`">
          <span v-for="(part, partKey) in paragraph" :key="`part-${partKey}`">
            
            <!-- Render an anchor tag if the part is a link -->
            <template v-if="isLink(part)"
              ><a :href="part.link">{{ part.text }}</a></template
            >
            <!-- Else, just put output the part -->
            <template v-else>{{ part }}</template>
          </span>
        </li>

      </ul>
    </template>
  </div>
</template>

<script>
const about = [
  [
    "This is normal text ",
    {
      text: "im a link",
      link: "https://www.stackoverflow.com",
    },
    ", is not bad ",
  ],
  ["More text and text"],
];

export default {
  ...
  data() {
    return {
      elementData: [],
    };
  },
  mounted() {
    this.setData();
  },
  methods: {
    isLink(e) {
      // You can change this condition if you like
      return e && typeof e === "object" && e.link && e.text; 
    },
    setData() {
      this.elementData = about;
    },
  },
};
</script>

请注意我们刚刚是如何根据条件创建元素的。如果部件是一个对象，我们会渲染一个锚标记，并且具有链接和文本属性。否则，我们只显示字符串。

See live demo