[Vuejs]-VUE Passing JSON from click function to HTML template

by

0👍

You need to return it in the data function in the object property. Those properties are reactive, and pass the prop parameter to setup function

<template> 
<DIV>
  {{info}}     
 </DIV>    
</template>

<script>

export default defineComponent({
  components: {
    HelloWorld
  },
  
  data() {
    return {
        info: {} // declare reactive property here
    }
  },    
  setup(props) {
    const toast = useToast();
    const text = ref('');
    // var info; no need to declare a local variable
    //const jsonobj = ref('');
    
    function search() {
      toast.add({ severity: 'info', summary: 'fetch data', detail: text });
      axios
      .get('http://localhost:7071/api/paramval/' + text.value)      
      .then(function(response){
          props.info = response; // assign your data to reactive property
       })       
                  
      // console.log(info);
    }
    return {
      text,
      search,
      info                               
    }
  },
  mounted () {
     /*axios
      .get('http://localhost:7071/api/paramval/439074042')
      .then(response => (this.info = response))*/
  }
}) 
</script>

0👍

you are using composition api so setup will run after the page created.

template

<div>
  {{info}}
</div>

script

const info = ref([]) // defined as a empty array

function search() {
  toast.add({ severity: 'info', summary: 'fetch data', detail: text });
  axios.get('http://localhost:7071/api/paramval/' + text.value)      
    .then((response) => {
      // pass the response to info
      info.value = response.data; 
    })

Leave a comment