Question

所以我正在访问一个外部API，并且试图显示此数据

https://i.stack.imgur.com/Yop0I.png

据您所见，一切都很好

https://i.stack.imgur.com/L3hXq.png

使用此代码

        <tr v-for="cv_output in cv_outputs" :key="cv_output.id">
                <td>{{ 'teste' }}</td>
                <td>{{ cv_output['id'] }}</td>
                <td>{{ cv_output['last-modified-date'] }}</td>
                <td>{{ cv_output['output-category']['value'] }}</td>
                <td>{{ cv_output['output-category']['code'] }}</td>
                <td>{{ cv_output['output-type']['value'] }}</td>
                <td>{{ cv_output['output-type']['code'] }}</td>
                <td>{{ cv_output['other-output'] }}</td>

但是一旦我尝试进一步

 {{ cv_output ['other-output']['title'] }}

数据停止显示在表格和控制台中，我得到以下信息：

TypeError：无法读取null的属性“ title”

我认为这没有任何意义。知道为什么吗？

控制器方法：

public function getRemoteOutputs()
{
$science = Auth::user()->science_id;

$client = new Client(['headers' => ['Accept' => 'application/json']]);

$request = $client->get(
    'https://url_to_the_api/'.$science.'/degree',
    [
        'auth'          => ['client', 'secret'],
    ]

);

$data = $request->getBody()->getContents();

return $data;
}

Answer 1

尝试一下：

{{ cv_output ['other-output'] ? cv_output ['other-output']['title']: ''}}

这将返回other-output->标题（如果存在），否则将不返回任何错误。（如果您希望将诸如“不可用”之类的内容默认设置为单引号，则可以在其中添加任何内容）

Answer 2

我@Helpinghand是正确的，其中一条记录丢失了other-output。

尝试：

<td>
    <span v-if="cv_output['output-type']">{{ cv_output['output-type']['title'] }}</span>
    <span v-else>No Output Type Title</span>
</td>

访问更多数据

2 个答案: