在vue组件模板中执行javascript？

Question

在vue.js组件中，我正在尝试在模板中编译变量，但它没有被编译/转换。任何建议我如何能够实现以下目标：

<template>
    <img src="{{ window.SETTINGS.ASSETS_DIR + 'img/foo.jpg' }}"/>
</template>

设置为：

window.SETTINGS = {
  ASSETS_PATH: '/wp-content/themes/my-theme/assets/',
  API_BASE_PATH: '/wp-json/wp/v2/'
}

Answer 1

它不起作用，因为Vue对window.SETTINGS一无所知。

您应该在{Vue Component / Instance中的window.SETTINGS对象中引用data属性。

data() {
  return {
    settings: window.SETTINGS
  }
}

其他选项可能是扩展Vue.prototype如果你需要整个应用程序：

Vue.prototype.SETTINGS = {
  ASSETS_PATH: '/wp-content/themes/my-theme/assets/',
  API_BASE_PATH: '/wp-json/wp/v2/'
}

然后您可以通过输入以下内容访问它：

this.SETTINGS

最后一步是不使用插值，而是使用绑定：

<img :src="SETTINGS.ASSETS_PATH + 'hello.jpg'" alt="">