在变量中绑定动态表达式答案

【问题标题】：bind dynamic expression in a variable在变量中绑定动态表达式
【发布时间】：2022-12-17 23:19:39
【问题描述】：

我正在创建一个 Vue 应用程序，其中表达式将作为变量来自配置。我需要运行表达式（类似于 javascript 中的 eval）并将结果应用于属性

例如：

<v-text-field placeholder="{{expression}}"></v-text-field>

但这是显示 expression ，而不是 evaluating 。有什么办法可以做到这一点？

编辑

这里的表达可以是这样的

data.option=1?"ABC":"BCD"

【问题讨论】：

等等，为什么你在这里有两个相同的帐户？
我没有。我从手机和笔记本电脑上登录相同。我无法从我的笔记本电脑发表评论，所以回到移动设备并尝试。它在做。我怀疑一些堆栈溢出问题
您有 2 个完全不同的帐户。请只使用一个，因为它是被禁止的，你可能会被禁止一个（甚至两个？）。

标签： javascript vue.js vuejs2 vue-component vuejs3

【解决方案1】：

您可以尝试使用eval，但请注意::

const out = 'data.option === 1 ? "ABC" : "BCD"'
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      data: {option: 1}
    }
  },
  computed: {
    expression() {
      return eval(JSON.parse(JSON.stringify('this.' + out)))
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-text-field :placeholder="expression"></v-text-field>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

【讨论】：

您好，感谢您的回答。但是这里const out=data.option==1？ 'ABC':'BCD' 是尝试。但它显示了文本。不评估表达式。如何实现这是查询
@Binesh Nambiar C 嘿伙计，请再次检查，我更新了我的答案:)
您好，再次感谢您的回答。但是表达式需要适合一个变量（我计划将来从服务器响应加载表达式，这将由管理员设置）。
谢谢尼古拉，我会试试这个。在某种程度上，我正在寻找的是这个。双向绑定等......需要对此进行验证。感谢您的大力支持
嗨尼古拉，它按预期工作得很好。我使用 var fn = new Function('dataObject', expr) return fn(this.dataObject) 而不是 eval，因为 mozilla 网站建议不要使用 eval。但理想情况下，逻辑非常相似。再次感谢您的大力帮助。甚至绑定等都按预期运行

【解决方案2】：

您可以尝试在属性前添加冒号，如下所示。表示引号中间有表达式

<v-text-field :placeholder="expression"></v-text-field>

【讨论】：