Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Component] [slider] slider, model-value and @change these all not work #14998

Open
alamhubb opened this issue Nov 28, 2023 · 9 comments · May be fixed by #16777
Open

[Component] [slider] slider, model-value and @change these all not work #14998

alamhubb opened this issue Nov 28, 2023 · 9 comments · May be fixed by #16777
Labels

Comments

@alamhubb
Copy link

Bug Type: Component

Environment

  • Vue Version: 3.3.7
  • Element Plus Version: 2.4.3
  • Browser / OS: UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
  • Build Tool: Vite

Reproduction

Related Component

  • el-slider

Reproduction Link

Element Plus Playground

Steps to reproduce

Slide these 3 slieders, and the first two cannot display the value normally

What is Expected?

all can work

What is actually happening?

1,2 not work,3 is success

Additional comments

(empty)

@Jevin0
Copy link
Contributor

Jevin0 commented Nov 29, 2023

1,2没有改变的原因是因为你没有给slider组件做双向绑定。
@change传出来的是你通过v-model或者:model-value传入的值

@alamhubb
Copy link
Author

alamhubb commented Nov 29, 2023

1,2没有改变的原因是因为你没有给slider组件做双向绑定。 @change传出来的是你通过v-model或者:model-value传入的值

这很奇怪,比如elm2中的 el-input和el-select,都可以做到不绑定v-model,直接使用change,到了elm-plus就不可以了吗

This is very strange. For example, el-input and el-select in elm2 can be used without binding v-model and use change directly. But is it not possible in elm-plus?

@Jevin0
Copy link
Contributor

Jevin0 commented Nov 29, 2023

1,2没有改变的原因是因为你没有给slider组件做双向绑定。 @change传出来的是你通过v-model或者:model-value传入的值

这很奇怪,比如elm2中的 el-input和el-select,都可以做到不绑定v-model,直接使用change,到了elm-plus就不可以了吗

This is very strange. For example, el-input and el-select in elm2 can be used without binding v-model and use change directly. But is it not possible in elm-plus?

并不是吧,你可以去elm2文档中找到input组件在线试试,如果你只是使用:values传入值,你输入值输入框中也并不会有内容。除非你加上@update:value事件自己做一个赋值value的变量

@alamhubb
Copy link
Author

1,2没有改变的原因是因为你没有给slider组件做双向绑定。 @change传出来的是你通过v-model或者:model-value传入的值

这很奇怪,比如elm2中的 el-input和el-select,都可以做到不绑定v-model,直接使用change,到了elm-plus就不可以了吗
This is very strange. For example, el-input and el-select in elm2 can be used without binding v-model and use change directly. But is it not possible in elm-plus?

并不是吧,你可以去elm2文档中找到input组件在线试试,如果你只是使用:values传入值,你输入值输入框中也并不会有内容。除非你加上@update:value事件自己做一个赋值value的变量

https://codepen.io/491369310/pen/rNPZjpL

你看,elm2的el-select, 触发change事件时,change中得到的value是新值,而不是旧值
相比

 <el-slider :model-value="value" @change="valueChange"></el-slider>

中的valueChange 中得到的value是旧值,而不是change后的新值

@Jevin0
Copy link
Contributor

Jevin0 commented Nov 29, 2023

image
这得看组件内部他emit的时候传的什么值,elm2的select这他@change往外传出的就是option.value值,那当然打印出来就是你点击的那个option的值。但是在demo中你并没有双向绑定,你没有发现你点击了别的options,但是input框中并没有改变吗

@alamhubb
Copy link
Author

alamhubb commented Nov 29, 2023

image 这得看组件内部他emit的时候传的什么值,elm2的select这他@change往外传出的就是option.value值,那当然打印出来就是你点击的那个option的值。但是在demo中你并没有双向绑定,你没有发现你点击了别的options,但是input框中并没有改变吗

我是觉得el2和elp ,对于不同组件的change事件的表现不一致, 一个组件change事件传改变后的值,一个传改变前的值,很奇怪

@wzc520pyfm
Copy link
Contributor

wzc520pyfm commented Nov 29, 2023

If you use model-value, you need to bind the input event, as follows:

<el-slider :model-value="value" @change="valueChange" @input="(v) => value = v"></el-slider>

@FrontEndDog
Copy link
Member

我认为这是一个不正常的现象,举个🌰:

我滑动滑块之后,我不想立即改变滑块的绑定值,我需要取到滑动之后的新值去做一些异步操作,比如请求接口,等接口成功返回之后,再去将滑块的绑定值,变更为新值。

我会提个PR尝试修复他

@alamhubb
Copy link
Author

alamhubb commented Dec 6, 2023

If you use model-value, you need to bind the input event, as follows:

<el-slider :model-value="value" @change="valueChange" @input="(v) => value = v"></el-slider>

你不觉得这么写很繁琐没有必要么,正常认知,删除 :model-value="value" @input="(v) => value = v",只保留

<el-slider @change="valueChange"></el-slider>

才符合咱们开发的一贯习惯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
4 participants