What is the best way to change a Vue prop using an external JavaScript function?

Question

What is the best way to change a Vue prop using an external JavaScript function?

In my current project, I am developing a website utilizing PHP templates and jQuery. One of the features includes a table built with Vue:

let vuetablecomponent= new Vue({
  components: { ManualTable },
}).$mount('[data-vue-app=manualtable]');

I am looking for a way to control the state of the Vue table externally. Right now, I am directly changing the props using JavaScript, like so:

vuetablecomponent.$children[0].aprop = 'propvalue'

Vue has warned me about the direct manipulation of props:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

Although technically I do not see it as an issue since the parent component is not a Vue component, and I want the value to be updated if the page is re-rendered by PHP, I am curious if there is a more elegant solution for this scenario.

javascript vue.js

Answer 1

Answer №1

How can you display the component and pass a prop to it upon initial render?

Regardless of whether you are using PHP templates or plain HTML, you need to initialize the Vue app in some way so that the browser can load a Vue component properly.

You can follow either of these methods:

Method A (using the render method):

--- init-app.js --
new Vue({
  el: '#app',
  render: h => h(App)
})


-- App.vue --
<template>
  <MyTableComponent :a-prop="tableProp" />
</template>

<script>
export default {
  data() {
    return {
      tableProp: "123-abc",
    };
  },
}
</script>

If you are using this method, simply create a reference to the component like this:

mounted() {
  window.__APP__ = this
}

and then update the tableProp wherever needed by using

window.__APP__.tableProp = "new-value"

Method B (using HTML content as the template):

--- index.php ---
<?php
<html>
  <body>
    <div id="app">
      <MyTableComponent :a-prop="tableProp"></MyTableComponent>
    </div>
  </body>
</html>
?>

new Vue({
  el: "#app",
  component: {
    MyTableComponent,
  },
  data: {
    tableProp: "123-abc",
  }
})

If this is the method you are using, create a reference to the app like this:

window.__APP__ = new Vue({})

Ensure that Vue is loaded before your script that updates this prop so that the variable is properly set.

Answer 2

How can you display the component and pass a prop to it upon initial render?

Regardless of whether you are using PHP templates or plain HTML, you need to initialize the Vue app in some way so that the browser can load a Vue component properly.

You can follow either of these methods:

Method A (using the render method):

--- init-app.js --
new Vue({
  el: '#app',
  render: h => h(App)
})


-- App.vue --
<template>
  <MyTableComponent :a-prop="tableProp" />
</template>

<script>
export default {
  data() {
    return {
      tableProp: "123-abc",
    };
  },
}
</script>

If you are using this method, simply create a reference to the component like this:

mounted() {
  window.__APP__ = this
}

and then update the tableProp wherever needed by using

window.__APP__.tableProp = "new-value"

Method B (using HTML content as the template):

--- index.php ---
<?php
<html>
  <body>
    <div id="app">
      <MyTableComponent :a-prop="tableProp"></MyTableComponent>
    </div>
  </body>
</html>
?>

new Vue({
  el: "#app",
  component: {
    MyTableComponent,
  },
  data: {
    tableProp: "123-abc",
  }
})

If this is the method you are using, create a reference to the app like this:

window.__APP__ = new Vue({})

Ensure that Vue is loaded before your script that updates this prop so that the variable is properly set.

What is the best way to change a Vue prop using an external JavaScript function?

Answer №1

Method A (using the render method):

Method B (using HTML content as the template):

Similar questions

What are the steps for releasing a Next.js app as an npm package?

The data in the partial view is not being properly shown by using ng-repeat

Ensuring consistency of variables across multiple tabs using Vue.js

Tips for effectively splitting arrays nested within an array using JavaScript

To dismiss a popup on a map, simply click on any area outside the map

Enhance your Django website with the powerful jQuery Datatables plugin

Ways to verify if information is being added to a JSON file or not

How can I notify an error in CoffeeScript/JavaScript when a parameter is not provided?

Simplest method for storing small amounts of data

How to retrieve an element by its class using JavaScript and Jquery while implementing a

What is the best way to retrieve the value of a select tag in Vue JS?

Positioning Multi-level Drop Down Div in Javascript - How to do it efficiently?

Switch the cursor to display the magnifying glass icon for zooming in and out

Troubleshooting: WordPress failing to launch Bootstrap Modal

Download a file on button click using JavaScript with data extracted from the DOM

Experience the power of Vue.js combined with Axios for easy data fetching and manipulation with JSON

Reacting to URL Changes but Failing to Load the Requested Page

Why is my Vue element being titled incorrectly by default?

Transmit an array using a GET Request

Having trouble running classes using Maven test with the Testng.xml file in the terminal, however, it runs smoothly in Eclipse