Vue.JS 从 JSON 对象打印空值

Posted 2023-02-22

【中文标题】Vue.JS 从 JSON 对象打印空值

【英文标题】：Vue.JS prints empty values from JSON Object

【发布时间】：2020-04-08 15:15:09

【问题描述】：

我正在编写这段代码，其中 Vue.JS 模块调用 php 文件，该文件从外部服务器获取数据并返回 JSON 响应。我编写了一个循环，用于从 JSON 中获取特定字段并以对话格式打印它们。但它只显示没有文字的空消息气泡（消息气泡的数量是正确的，但里面没有文字）。

这是我的代码：

const app = new Vue(
  el: "#chatview",
  data: 
    data:[],
    txtInput: '',
    mid:0

  ,

    methods:

    

    GetBubbleType: function (name)

    if(name === "Support")
            return "yours messages";
    else
            return "mine messages";
    ,

    ,

    mounted()
                        axios.post(
  './ConversationGetter.php',
  
    function2call: 'getRecord',
    id: 1,
  
)
.then(response =>  this.data=response.data.data;
console.log(response.data);
)
.catch(error => );

,
    template: `
  <div style ="font-family:Open Sans;font-size:16px"> 
    <div v-for="message in data">
  <div class="fade-in">
        <div v-bind:class="GetBubbleType(data.name)">
        <div class="message last">
        <p>data.message</p>
        </div>

        </div></div></div>  `
)

PHP返回的响应：

  "data": [
    
      "Modified_Time": "2019-12-13T16:08:36+05:30",
      "$currency_symbol": "$",
      "Message": "Hey!",
      "Created_Time": "2019-12-13T16:08:36+05:30",
      "Name": "Me",
    ,
    

      "Modified_Time": "2019-12-13T16:08:27+05:30",
      "$currency_symbol": "$",
      "Message": "Yo!",
      "Created_Time": "2019-12-13T16:08:27+05:30",
      "Name": "Me",
    ,

  ],

【问题讨论】：

你指的是data.name，但它应该是data.Name - 在javascript中大小写很重要 - 你也有"message in data"然后使用data.name ...所以它实际上应该是GetBubbleType(message.Name)

改变大小写后结果还是一样。

看看你犯的另一个错误......使用消息而不是数据，因为消息是数据的每个值

旁注，为什么您的对话 getter 方法是 POST 请求？

另外，您在第二个代码块response.data.data 中发布的 JSON 响应是吗？还是response.data？

【参考方案1】：

您应该调用该消息，因为您正在循环遍历 data 道具，它应该是 message.Message 而不是 data.message 在段落标签内

当你遍历 data prop 时，每个循环对象都包含消息元数据

      "Modified_Time": "2019-12-13T16:08:27+05:30",
      "$currency_symbol": "$",
      "Message": "Yo!",
      "Created_Time": "2019-12-13T16:08:27+05:30",
      "Name": "Me",
    ,

您应该能够在 v-for 循环中访问每个 object property 像这样的 message.Message