V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
honkew
V2EX  ›  Vue.js

小白问一个 VueJs 的问题

  •  1
     
  •   honkew · 2022-10-29 12:11:24 +08:00 · 1898 次点击
    这是一个创建于 754 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我想这么写 不行

    <div v-for="item of list">
    <div @click="PromptSetValue(item.it)"></div>
    
    
    function PromptSetValue(e){
        var text = prompt();
        e = text;
    }
    
    

    需要这么写 才可以

    <div v-for="item of list">
    <div @click="PromptSetValue(item)"></div>
    
    
    function PromptSetValue(e){
        var text = prompt();
        e.it = text;
    }
    

    有没有什么好办法,因为还需要在其它地方用的这个方法

    9 条回复    2022-10-30 06:07:48 +08:00
    honkew
        1
    honkew  
    OP
       2022-10-29 12:34:31 +08:00
    有没有好的写法,不能引用对象的值。
    https://codepen.io/tsymq-live/pen/vYrOPYm

    希望大神帮我改改
    hay313955795
        2
    hay313955795  
       2022-10-29 13:12:57 +08:00
    item.it 传的是一个值...item 给的是一个对象.

    PromptSetValue 里循环列表找到对应值的对象改数据呗
    TianQian
        3
    TianQian  
       2022-10-29 13:15:48 +08:00
    Vue2 没有更好的办法
    shintendo
        4
    shintendo  
       2022-10-29 13:32:41 +08:00   ❤️ 3
    这跟 Vue 没有任何关系,是编程语言的传值 /传引用问题。

    第一种写法,e 是 item.it 的复制品,你给 e 赋值赋出花来也不会影响 item.id

    第二种写法,e 是 item 的复制品,但 e.ititem.id 是同一个东西,所以给 e.it 赋值就是给 item.id 赋值。

    办法就是用第二种写法。
    charlie21
        5
    charlie21  
       2022-10-29 15:06:45 +08:00
    PromptSetValue(item.it)

    function PromptSetValue (list, it) {
    var text = prompt();
    foreach (item of list) {
    if (it === item.it) { item.it = text; break; }
    }
    console.log(list) // 确认已更新
    }

    一种可能性是直接方法名变成 PromptSetValue (list, item.it) 虽然很难看
    summerLast
        6
    summerLast  
       2022-10-29 15:41:04 +08:00
    和语言无法 第一个地方的 赋值并不是给 上面迭代的 item 进行了赋值, 而是相当于把 item 的引用赋值给了 e ,如果给 e 赋值的话并不会改变原有的 item 可以理解成 a b c 持有一个 item 的引用 赋值的过程给 b 持有了一个新的引用 而非原来的医用如下面例子:
    ```
    a = {it:1};
    b = a;
    b = {it:2};
    ```
    问此时 a 的值是多少
    第二个则是 a b c 持有一个引用,并未对 a b c 修改新的引用 而是通过改引用找到 item 的属性 it 进行了赋值 如下例子
    ```
    a = {it:1};
    b = a;
    b.it = 2;
    ```
    问此时 a 的值是多少

    如果需要改变值可以传入当前元素下标 ,结合数组进行修改 this.$set(list,index,text)

    b.id = 1 b 指向 xxx 内存地址,b.it 指向 xxx 内存对应 it 的地址, 给 xxx 指向的 it 地址赋值 为 1
    b={id:1} 是指将原有 b 指向的 xxx 内存地址改为指向 新创建对象对应的 yyy 内存地址,而此时 a b 已经没有关系
    summerLast
        7
    summerLast  
       2022-10-29 15:55:22 +08:00
    两个的本质都是传值(或则叫传引用 /或则叫 copy ),传的是指针对象类型的值( copy ), 指针对象中指向了具体的对象数据和对象类型,还是以上面为例
    - 如果直接对变量赋值其含义是修改变量所指向的数据
    - 如果对指针对象指向的属性赋值含义是找到指针所指向的对象修改该对象 xx 属性指向的数据 而改对象的指针并会不变

    结合上面两条 第一个写法是修改变量所指向的值, 而变量只是容器 ,好比里面放到是身份证号; e 和 item 是两个容器 对 e 容器修改里面的数据(身份证号)并不影响 item 容器里面的值
    而第二个是拿着相同的身份证号找到对应的人(如:张三)对他进行涂抹
    arnosolo
        8
    arnosolo  
       2022-10-29 16:06:30 +08:00
    我一般是这么写的, 标不标准咱也不知道, 反正用是能用.

    interface Cat {
    name: string;
    weight: number;
    }

    const cats = reactive<Cat[]>([
    {
    name: 'mimi',
    weight: 5,
    },
    ])

    function addCatWeight(name: string, weight = 1) {
    const cat = cats.find((cat) => cat.name === name);
    if(cat) {
    cat.weight += weight
    }
    }

    function setFoodSupply(name: string, supply: number) {
    cats.find((cat) => cat.name === name)
    }

    <ul>
    <li v-for="cat of cats" :key="cat.name" @click="addCatWeight(cat.name)">
    {{ cat.name }}.weight = {{ cat.weight }}
    </li>
    </ul>
    Sunzehui
        9
    Sunzehui  
       2022-10-30 06:07:48 +08:00
    继续拆,不要怕
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3249 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 12:04 · PVG 20:04 · LAX 04:04 · JFK 07:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.