如何从vue.js数据中获取值到另一个数据参数

Question

我正在使用vue.js和vue-qrcode 我在localStorage中存储了一些用户数据并正确获取它。

<template> 
    <div class="row" style="100%;"> 
     <div class="center-block" style="width:200px"> 
      <qrcode :size="size" :val="val"></qrcode> 
     </div> 
    </div> 
    {{content.last}} 
</template> 
<script> 
    import store from '../store' 
    var content = []; 
    export default { 
     data() { 
       return { 
        content: store.todoStorage.fetch(), 
        size: 250, 
        fgColor: '#007a33', 
        bgColor: '#ffc72c', 
        val: "BEGIN:VCARD\r\nVERSION:2.1\r\nN:john;doe\r\nFN:asd " + content.last + "\r\nTEL;TYPE=cell:234\r\nEMAIL;PREF;INTERNET:234234\r\nEND:VCARD" 
       } 
      }, 
      components: { 
       qrcode: VueQr 
      }, 

    } 

</script> 

我试着把字符串放到模板中，它在那里工作，但QR以某种方式变形。如果我删除该变量并仅使用data（）val模型中的文本，则QR是完美的并且可以工作。但是，我需要从上面的内容模型中获取4个值。

Answer 1

很难说，没有看到你的整个VUE应用程序。这是肯定的，你不能在你的val对象中使用content.last，因为它将会是未定义的。基本上你是在它存在之前分配它的。计算对象应该在那里帮助。

类似：

computed: { 
    val() { 
    var content = store.todoStorage.fetch(); 
    return "BEGIN:VCARD\r\nVERSION:2.1\r\nN:john;doe\r\nFN:asd " + content.last + "\r\nTEL;TYPE=cell:234\r\nEMAIL;PREF;INTERNET:234234\r\nEND:VCARD" 
    } 
} 

同样，不知道这是怎么回事，没有看到你的代码来解决，但它可以让你在正确的道路。