bind dynamic expression in a variable-CodePudding

I'm creating a Vue application in which an expression will come from config as a variable. I need to run the expression (something like eval in javascript) and apply result to attribute

eg:

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

But this is showing the expression , not evaluating. Any way to achieve this?

Edit

Here expression can be something like

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

CodePudding user response：

You can try with eval but be aware::

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

CodePudding user response：

You can try to add colon before the property like following. To indicate that there is an expression in the middle of the quotation mark

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