Как передать переменную в качестве параметра методу в одном файле?

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» является строкой. Строка не имеет свойства адреса. Таким образом, iletism.address не определен.

Когда это прибывает в вашу функцию n2br, он вызывает undefined.replace. Который не существует, поэтому замена не существует при неопределенной ошибке.

Так что либо охраняйте это в методе n2br, либо задайте значение по умолчанию для iletism, чтобы существовал адрес, но это пустая строка.

Вы можете выполнить одно и то же с вычисленным свойством, но то же самое верно, что вам понадобится базовый регистр, заданный в данных или в вычисленном методе.

Answer 2

Хмм, я не думаю, что вам нужно отправить его честно. Похоже, вам нужно вычислить свойство.

Допустим, ваш метод выборки задает свойство данных iletisim.

В шаблоне вы могли бы сделать это:

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

А затем в компоненте после методы добавить вычислен

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