时间戳

首页 > 解决方案 > 将数据从 vue.js 推送到烧瓶渲染变量

javascript - 将数据从 vue.js 推送到烧瓶渲染变量

问题描述

我有一个烧瓶变量，我试图将它用作 vu.js 分隔符中的 ID：['[[', ']]']。因此，例如，我在<p>标签中定义的烧瓶 id 包含“emirates”字样，因此我想从 vue js 将字符串“hi”推送到由烧瓶呈现的 emirates 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 推送到烧瓶渲染变量

标签： javascriptvue.jsflask

解决方案

我的做法是使用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>

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

推荐阅读