Question

我正在尝试用变量中的\n替换所有<br>。为什么我不能将变量作为函数参数发送到模板中的方法？控制台说Uncaught TypeError: Cannot read property 'replace' of undefined。

我认为它调用n2br方法，但不能将变量作为参数发送。

有谁知道如何解决这个问题？

<template>
    <div id="iletisim" class="page">
        <div>{{ n2br(iletisim.address) }}</div>
    </div>
</template>

<script>
    export default {
        name: "iletisim",
        data() {
            return {
                iletisim: ""
            }
        },  
        methods: {
        fetch: function() {
            this.$http.get(this.site.apiPath + this.site.currentLangCode + "/" +this.$route.params[1]).then(response => {
                this.iletisim = response.body.content;
            },
            response => {
            // error callback
            }); 
            n2br: function(text) {
                text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');
                return text;
            }
        },
        beforeMount () {
            this.fetch()
        }       
    }
</script>

Answer 1

当这最初被实例化时，你的“iletism＆＃39; data是一个字符串。该字符串没有地址属性。所以iletism.address是未定义的。

当它到达你的n2br函数时，它会调用undefined.replace。哪个不存在，因此未定义的错误中不存在替换。

所以要么在n2br方法中保护它，要么为iletism设置默认值，以便地址存在但是为空字符串。

您可以使用计算属性完成相同的操作，但同样如此，您将需要在数据或计算方法中设置的基本案例。

Answer 2

嗯，我不认为你需要诚实地发送它。听起来你需要一个计算属性。

假设您的fetch方法设置了数据属性iletisim。

在您的模板中，您可以这样做：

<div>{{ computedIletisim }}</div>

然后在方法中添加计算

之后的组件中

export default {
    ...
    methods: {
        ...
    },
    computed: {
      computedIletisim: function() {
        return this.iletisim.address.replace(/(?:\r\n|\r|\n)/g, '<br />');
      }
    }
...
}

如何将变量作为参数发送到单个文件组件中的方法？

2 个答案: