[Vuejs]-Pushing data from vue.js to flask rendered variable

by

0👍

The way I’d do is that I’d reference your element using the ref attribute.
By doing that you’ll be able to access the element inside your Vue component.

Once you have access to your element, you can get the ID attribute and assign that to a Vue variable. Then modify this variable according to your needs.

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>

Now variable_test ( which would be the variable name sent from ‘flask’ ) is changeable inside Vue.

Leave a comment