如何在vue.js中编写无序列表？

Question

我正在尝试为从控制台打印的一系列错误创建无序列表。我正在使用vue.js，并且正在努力了解如何编写此代码。我的相关代码如下。

打印错误脚本：

export default {

    name: 'post',

    data () {

        return {

            validationErrors: []

        }

    },

    methods: {

        getPost () {

            //irrelevant code

            .then(({data}) => {        

                this.validationErrors = data.validationErrors     

            })

        },

        postUpdate () {

            //more irrelevant code

            .catch(error => {

                console.log(error);

                this.validationErrors = error.response.data.validationErrors;
            })

        } 

    }

}

我如何显示错误：

<p v-show="(this.validationErrors || '').length > 0">{{this.validationErrors != null && validationErrors.length > 0 ? validationErrors[0].msg : ""}}</p>

任何帮助将不胜感激！

Answer 1

不太清楚所需的结果，但是如果确定validationError始终是数组（即使为空）而不是null，则更容易推断。然后，您不必检查长度或它是否为空，只需执行此操作

<p v-for="error in validationErrors" :key="error.msg">
    {{ error.msg }}
</p>

如果没有错误，则没有任何渲染。