Question

我想从远程获取svg并通过编译使其生动。 “赋予生命”是指按类选择其中的一些元素，并在其中动态添加一系列组件。

现在我只使用<div v-html="svg"/>，我的组件看起来像这样：

data() {
  return {
    svg: '',
  }
},
async created() {
  let res = await axios.get(mySvgSrc)
  this.svg = res.data
}

但是，这不允许我通过插入具有vue绑定的元素来实现它。

因此，我想使用<component :is="compName"></component>之类的动态组件，因此在获取我的svg之后，将结果用作模板。示例js fiddle here。

data() {
  return {
    compName: 'someDefaultComponent',
  }
},
async created() {
  let res = await axios.get(mySvgSrc)
  Vue.component('svgComponent', { template: res.data })
  this.compName = 'svgComponent' 
}

但是，nuxt一直抱怨无法编译它：

[Vue警告]：您正在使用Vue的仅运行时版本，其中模板编译器不可用。要么预编译模板进入渲染功能，或使用编译器随附的版本。

我该怎么办？

1）提取后，是否以某种方式将svg（字符串）模板转换为呈现函数？

2）使用编译器随附的内部版本？（而不是，但如果是这样：那是如何工作的？）

我觉得我需要选项2）才能执行选项1）。

编辑

刚刚找到v-runtime-template，不确定这是否是正确的方法...

Answer 1

您需要更改Vue版本。添加此字符串：

const getStorageData = key =>
  new Promise((resolve, reject) =>
    chrome.storage.sync.get(key, result =>
      chrome.runtime.lastError
        ? reject(Error(chrome.runtime.lastError.message))
        : resolve(result)
    )
  )

const { data } = await getStorageData('data')


const setStorageData = data =>
  new Promise((resolve, reject) =>
    chrome.storage.sync.set(data, () =>
      chrome.runtime.lastError
        ? reject(Error(chrome.runtime.lastError.message))
        : resolve()
    )
  )

await setStorageData({ data: [someData] })

到nuxt.config.js 在这里：

config.resolve.alias['vue'] = 'vue/dist/vue.common'

使用Nuxt动态获取和编译模板

编辑

1 个答案: