无法在 NativeScript Vue 模态中访问道具

Posted 2023-04-14

【中文标题】无法在 NativeScript Vue 模态中访问道具

【英文标题】：Can't Access Props in NativeScript Vue Modal

【发布时间】：2019-07-27 01:18:31

【问题描述】：

我正在使用模态显示 listView，我想将列表作为数组传递给模态。我这样称呼模态：

this.$showModal(Picker,  props:  list: [

   name: "Item 1" ,
   name: "Item 2" ,
   name: "Item 3" 

]);

模态加载正常，console.log时可以看到模态中的道具

created: function()
  console.log(this.list);
, 

但是，我无法访问模板中的道具或循环它们。

 <ListView for="item in listOfItems">
   <v-template>
     <Label :text="item.name" class="listItem" />
   </v-template>
 </ListView>

我也试过了：

<ListView :for="item in $props.list">

模态组件的完整代码如下：

<template>
  <Page>

     <ListView for="item in listOfItems">
       <v-template>
        <Label :text="item.name" class="listItem" />
       </v-template>
     </ListView>

  </Page>
</template>

<script>

  export default 

    props: ["list"],

    created: function()
      console.log(this.list);
    ,

    data()
      return 
        listOfItems: this.list
      
    
  

</script>

我做错了什么？

【参考方案1】：

将<ListView for="item in listOfItems"> 更改为<ListView for="item in list">

【讨论】：

不起作用:(由于某种原因，这些道具似乎无法从模板中访问。我也尝试传入一个值并将其添加到标签的文本中，但它只是似乎无法访问它。

不，它只是加载一个空白模式。

嗯。您能否提供一个有效的jsFiddle 链接（对调试很有帮助）？

【参考方案2】：

不知道为什么，但是当我改变了 数据（）返回 使变量名相同， 动物：动物， 蔬菜：蔬菜 成功了。

不必对字符串或整数执行此操作，只需对对象执行此操作。

【参考方案3】：

<ListView for="item in $props.list">

去掉冒号？

在使用 NativeScript-Vue 编码时，我正在删除不必要的 for 头部的 : 并引用 $props 属性。