将数据从vue.js推送到Flask呈现的变量

Question

我有一个flask变量，试图在vu.js定界符中将其用作ID：['[['，']]']。 因此，例如，我在<p>标记中定义的烧瓶ID包含“酋长国”一词，因此从vue js中，我想将字符串“ hi”推送到由flask呈现的酋长国ID。 我希望我不要听起来太混乱。

<i class="ui orange tiny label">
<p id="[[{{ i.App }}]]"></p> # This is flask rendered variable inside vue.js tag
</i>

基本上，我想将数据从vue.js推送到该ID。 我是vue.js的新手，不确定如何做。

<script>
    var app = new Vue({
      el: "#app",
      delimiters: ['[[', ']]'],
      data: {
        "emirates": "Hi"
      }
    });
  </script>

简而言之，我想将数据从vue.js推送到flask呈现的变量

Answer 1

我要做的方式是使用ref属性引用您的元素。 这样，您就可以访问Vue组件内的元素。

一旦可以访问元素，就可以获取ID属性并将其分配给Vue变量。 然后根据需要修改此变量。

 window.onload = () => { new Vue({ el: '#app', data() { return { variable_test: '', variable_name: null } }, mounted() { this.variable_name = this.$refs.my_element.getAttribute('id'); this[this.variable_name] = 'hi'; } }) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <!-- In your case here, id="variable_test" should be your flask variable. --> <p id="variable_test" ref="my_element"> {{variable_test}} </p> </div> 

现在，可以在Vue中更改variable_test （这是从'flask'发送的变量名称）。