VUE将JSON从单击函数传递到HTML模板

我是

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>

{{info}}
导出默认定义组件({
组成部分：{
你好世界
},
数据（）{
返回{
}
},    
设置（）{
const toast=useToost（）；
常量文本=参考（“”）；
var信息；
//常数jsonobj=ref（“”）；
函数搜索（）{
add（{severity:'info'，summary:'fetch data'，detail:text}）；
axios
.get（'http://localhost:7071/api/paramval/'+text.value）
。然后（响应=>（信息=响应））
控制台日志（信息）；
}
返回{
文本，
搜索，
信息
}
},
挂载（）{
/*axios
.get（'http://localhost:7071/api/paramval/439074042')
.然后（response=>（this.info=response））*/
}
}) 

---

谢谢你的帮助

您需要在对象属性的数据函数中返回它。这些属性是被动的，并将prop参数传递给设置功能

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

{{info}}
导出默认定义组件({
组成部分：{
你好世界
},
数据（）{
返回{
信息：{}//在此处声明被动属性
}
},    
设置（道具）{
const toast=useToost（）；
常量文本=参考（“”）；
//var info；无需声明局部变量
//常数jsonobj=ref（“”）；
函数搜索（）{
add（{severity:'info'，summary:'fetch data'，detail:text}）；
axios
.get（'http://localhost:7071/api/paramval/'+text.value）
.然后（功能（响应）{
props.info=response；//将数据分配给reactive属性
})       
//控制台日志（信息）；
}
返回{
文本，
搜索，
信息
}
},
挂载（）{
/*axios
.get（'http://localhost:7071/api/paramval/439074042')
.然后（response=>（this.info=response））*/
}
}) 

您使用的是

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