VUE将JSON从点击函数传递到HTML模板答案

【问题标题】：VUE Passing JSON from click function to HTML templateVUE将JSON从点击函数传递到HTML模板
【发布时间】：2021-04-23 14:38:38
【问题描述】：

我是Vue 的新手，想将我成功收到的JSON 内容传递给HTML var {{info}}，console.log(info) 显示我正确的JSON 内容。如果我使用mounted() 函数，它也会正确显示。

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

<script>

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

感谢您的帮助！

【问题讨论】：

标签： json vue.js

【解决方案1】：

您需要在对象属性的数据函数中返回它。这些属性是响应式的，并将 prop 参数传递给 setup 函数

<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>

【讨论】：

【解决方案2】：

您使用的是composition api，因此安装程序将在页面创建后运行。

模板

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

脚本

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; 
    })

【讨论】：