vue.js - 在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 组件/实例中将 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

最后一步是不使用插值，而是使用绑定(bind):

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