[Vuejs]-How to create a window function that can update model data in a rendered VueJS v3 app?

by

0👍

Just assigning the function to window should work. But note that your performRefresh() is not writing the ref’s value, but a self-defined property test, which won’t be reactive and can’t be used in the template. Looking at the template, I think you want to do

tableData.value.test = newData;

Here it is in a snippet:

const { createApp, ref } = Vue;

const App = {
  template: `
    <h6>Inside Vue:</h6>
    <pre>{{data.test}}</pre>
    <ul>
      <li v-for="item in data.test">{{item}}</li>
    </ul>
  `,
  setup() {
    const data = ref({test: [1,2,3]})
    const setTest = (test) => data.value.test = test
    window.setTest = setTest
    return {data, setTest}
  }
}
const app = createApp(App)
app.mount('#app')

function setRandomList(){
  const rnd = (max) => 1+Math.random() * max|0
  const list = Array.from({length: rnd(7)}, () => rnd(100))
  window.setTest(list)
}
.panel{
  border: 1px solid black; 
  padding: 4px;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 10px;
}
<div class="panel">
  <h6>Outside Vue:</h6>
  <button onclick="setRandomList()">Update List</button>
</div>
<div class="panel" id="app">

</div>


<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Leave a comment