CooCls

CooCls 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

寻找大猩猩

个人动态

CooCls 赞了回答 · 4月6日

解决VUE中,动态添加的文本框如何实现数据实时双向绑定?

<el-input style="width: 120px" v-model="item.price"/>

这里绑定的是 price, 你 this.goodsPrice.push(item); 的看上去是 {value: '选项1',label: '黄金糕'}

这样的 price 是无法被监测到的,而且因为你是直接push的原对象,所以导致goodsPrice 里面的也被改变了。

所以你应该把原对象拷贝一下,然后把price字段也加上11111111111

selectChange(item){
    this.goodsPrice.push({...item,price:0});
}

关注 5 回答 4

CooCls 赞了回答 · 4月3日

解决VUE中,动态添加的文本框如何实现数据实时双向绑定?

改成这样

this.goodsPrice.push(JSON.parse(JSON.stringify(item)))

或者其他方式复制或生成一个新的对象

原因就是实际上item指向的是goods内的对象,你添加修改数据时都是用的这个对象
相当于指针操作

关注 5 回答 4

CooCls 赞了回答 · 4月3日

解决VUE中,动态添加的文本框如何实现数据实时双向绑定?

vue能够侦测到数组响应式更新的只有七种方法:
(1)push
(2)pop
(3)shift
(4)unshift
(5)splice
(6)sort
(7)reverse
而对于object,能够侦测到object响应式更新则只有两种方法:
(1) vue.$set 设置属性值
(2) vue.$delete 删除属性

楼主的错误在于使用item.price = 0;对对象进行了一个赋值,而这个赋值vue是侦测不到它的变化的,即使用赋值操作不是响应式更新。

所以正确的代码应该是:

selectChange(item){
  this.$set(item,'price',0);
  this.goodsPrice.push(item);
}

关注 5 回答 4

CooCls 赞了回答 · 4月3日

解决VUE中,动态添加的文本框如何实现数据实时双向绑定?

selectChange(item){
            const data = {
              value: item.value,
              label: item.label,
              price: 0
            }
            this.goodsPrice.push(data);
        }

这样试下

关注 5 回答 4

CooCls 提出了问题 · 4月2日

解决VUE中,动态添加的文本框如何实现数据实时双向绑定?

在线调试地址

http://jsrun.net/Cp3Kp/edit

问题描述

项目中有个功能,通过选择器为商品列表添加商品,为每个新增的商品设置价格,但是以上实现方式造成新增的商品后面的文本框内容输入无法实时更新,在新增商品价格文本框处编辑无效,在原有商品价格文本框处编辑才会生效。为何会出现该现象,如何解决?

主要代码内容

html:

<div id="app">
<template>
  <el-select v-model="value" placeholder="请选择" @change="selectChange">
    <el-option
      v-for="item in goods"
      :key="item.value"
      :label="item.label"
      :value="item">
    </el-option>
  </el-select>
  <div>
    <div v-for="item in goodsPrice" :key="item.value">
        <span>{{item.label}}</span>
        <el-input style="width: 120px" v-model="item.price"/>
    </div>
  </div>
</template>
</div>

js:

data() {
      return {
        // 商品
        goods: [
            {value: '选项1',label: '黄金糕'},
            {value: '选项2',label: '双皮奶'},
            {value: '选项3',label: '蚵仔煎'},
            {value: '选项4',label: '龙须面'},
            {value: '选项5',label: '北京烤'}
        ],
        value: null,
        // 带价商品列表
        goodsPrice: [{value: '选项1',label: '黄金糕',price: 0}]
      }
    },
    methods: {
        // 选中商品,为商品添加价格属性,将带价格属性的商品加入到带价商品列表中
        selectChange(item){
            item.price = 0;
            this.goodsPrice.push(item);
        }
    }

关注 5 回答 4

CooCls 发布了文章 · 1月25日

记Jenkins中前端项目发布失败的问题,报错GLIBC_2.16 not found

项目在本地运行正常,在Jenkins中编译的时候失败,报错内容:

+ npm run release online

> component-cloud@1.0.0 release /data/jekins/workspace/component-cloud
> node --version && npm --version && npm install && npm run build && npm run pack && echo success "online"

node: /lib64/libc.so.6: version `GLIBC_2.16' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.17' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.14' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.18' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.19' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `CXXABI_1.3.5' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by node)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! component-cloud@1.0.0 release: `node --version && npm --version && npm install && npm run build && npm run pack && echo success "online"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the component-cloud@1.0.0 release script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/iotdev/.npm/_logs/2021-01-25T03_02_00_782Z-debug.log
Build step 'Execute shell' marked build as failure
Finished: FAILURE

按报错信息,说明Linux系统中的GLIBC版本不正确。网上查了GLIBC,这是Linux的底层API,很多依赖都引用到它,贸然升级或导致其它依赖出现问题。


进入服务器中该项目目录下手动编译项目npm run build,失败,报错内容同上。确定不是Jenkins导致该错误。
想到该项目并未在相关敏感依赖上有变化,推测该报错并非代码导致。


在服务器上新建了一个文件夹,将项目代码克隆到该路径下git clone xxxxxxxxxxxxx.git,执行发布操作npm run release online
发现项目正常发布,得出结论:服务器的相关依赖没有问题。据此推测或为某种缓存导致问题产生。


清空项目目录,重新将项目从仓库克隆至该目录,再次执行编译npm run build,成功。再Jenkins再次进行构建,成功。问题解决。


最后:在项目某个版本的依赖中,用到了node.js,但是后来又移除了对node的依赖,猜测该问题主要原因是高版本node造成的。

查看原文

赞 0 收藏 0 评论 0

CooCls 赞了回答 · 1月19日

解决img标签引用网络资源svg文件不显示的问题如何解决?

看下你的这个网络资源地址返回的 content-type 是不是正确的.

关注 2 回答 1

CooCls 关注了问题 · 1月18日

解决img标签引用网络资源svg文件不显示的问题如何解决?

img标签内src属性引用一个本地的svg文件能正常显示,如:
<img data-original="./img/a.svg" />
但是当引用一个网络svg资源的时候,就无法显示,如:
<img data-original="http://192.168.1.168:8080/img?id=1" />


该问题如何解决?

关注 2 回答 1

CooCls 提出了问题 · 1月18日

解决img标签引用网络资源svg文件不显示的问题如何解决?

img标签内src属性引用一个本地的svg文件能正常显示,如:
<img data-original="./img/a.svg" />
但是当引用一个网络svg资源的时候,就无法显示,如:
<img data-original="http://192.168.1.168:8080/img?id=1" />


该问题如何解决?

关注 2 回答 1

CooCls 赞了回答 · 1月15日

前端能否读取SVG文件的代码内容?

input获取到file时,直接使用FileReader读取即可.
在上传到服务器之前就可以做.

<input type="file" id="file">
<script type="text/javascript">
 const el = document.getElementById('file');
 el.addEventListener('change', ev => {
    const [file] = ev.target.files;
    const reader = new FileReader();
     reader.onload = e => {
       console.log(e.target.result);
     };
    reader.readAsText(file);
 });
</script>

关注 3 回答 3

认证与成就

  • 获得 12 次点赞
  • 获得 30 枚徽章 获得 1 枚金徽章, 获得 7 枚银徽章, 获得 22 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-04-25
个人主页被 1.6k 人浏览