bind dynamic expression in a variable

Question

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"

I'm not having. I logged in on same from both mobile and laptop. I was unable to comment from my laptop so went back to mobile and tried. It's doing. Some stack overflow issue i doubt — Binesh Nambiar C
– Binesh Nambiar C, Commented Oct 16, 2022 at 21:04
You have 2 totally different accounts. Please use only one because it's forbidden and you may get one banned (maybe even both?). — kissu
– kissu, Commented Oct 16, 2022 at 21:13

Nikola Pavicevic · Accepted Answer · 2022-10-16 21:11:30Z

2

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>

edited Oct 16, 2022 at 21:11

answered Oct 16, 2022 at 20:27

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Binesh Nambiar C Over a year ago

Hi, Thanks for your answer. But here const out=data.option==1? 'ABC':'BCD' is the try. But it shows the text. Not evaluating the expression. How to achieve this is the query

Nikola Pavicevic Over a year ago

@Binesh Nambiar C hey mate, check again pls, I updated my answer :)

Binesh Nambiar C Over a year ago

Hi, Thanks for the answer again. But the expression needs to fit in a variable(I'm planning to load the expression from server response in future which will set by admin).

Binesh Nambiar C Over a year ago

Thanks Nikola, I will try with this. To a level what i'm looking for is this. Two way binding etc... need to verify on this though. Thanks for your great support

Binesh Nambiar C Over a year ago

Hi Nikola, It worked well as expected. I used var fn = new Function('dataObject', expr) return fn(this.dataObject) instead eval since mozilla site suggested don't use eval. But ideally the logic is very much same. Thanks for your great help again. Even binding etc all are behaving as expected

kissu · Accepted Answer · 2022-10-18 07:53:00Z

1

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>

edited Oct 18, 2022 at 7:53

kissu

47.3k16 gold badges94 silver badges197 bronze badges

answered Oct 18, 2022 at 6:23

wechat bubble tea

112 bronze badges

Collectives™ on Stack Overflow

bind dynamic expression in a variable

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related