Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 09 16:49
    sendya commented #1532
  • Dec 09 16:47
    sendya commented #1532
  • Dec 09 15:29
    vedmant edited #1532
  • Dec 09 15:29
    vedmant opened #1532
  • Dec 09 14:45

    tangjinzhou on master

    fix: password add focus blur me… (compare)

  • Dec 09 14:44
    tangjinzhou commented #1485
  • Dec 09 14:34
    tangjinzhou closed #1320
  • Dec 09 14:34

    tangjinzhou on master

    feat: add modal not scroll to f… (compare)

  • Dec 09 14:27
    tangjinzhou labeled #1530
  • Dec 09 14:23

    tangjinzhou on master

    fix: body scroll when open moda… (compare)

  • Dec 09 11:23
    tangjinzhou labeled #1492
  • Dec 09 11:23
    tangjinzhou labeled #1492
  • Dec 09 11:16
    wolancy opened #1531
  • Dec 09 09:31
    cts-cool reopened #1530
  • Dec 09 09:31
    cts-cool closed #1530
  • Dec 09 09:31
    cts-cool reopened #1530
  • Dec 09 09:31
    cts-cool closed #1530
  • Dec 09 09:30
    cts-cool opened #1530
  • Dec 09 08:36
    ghfkui commented on c31aab0
  • Dec 09 07:18
    sendya commented #1109
Sy
@B3nnyL
Hey there, is that possible to get involved to the project? I'd like to contribute to vueComponent/ant-design-vue#143
tangjinzhou
@tangjinzhou
@B3nnyL of course
You can contribute code directly
@B3nnyL but you should pr to https://github.com/ant-design/ant-design-icons @HeskeyBaozi
Sy
@B3nnyL
@tangjinzhou cool, I’ll follow up. Cheers
Christopher Dosin
@ChristopherDosin

If i have a form. I don't get it how i can pass values to my form elements like with v-model.
I tried it like this and a few other variants without success

return {
      data: "",
      form: this.$form.createForm(this.data)
    };

data is filled with some data which are coming from an API like:

data: {
   name: "foo",
   foo: "bar",
   ....
}

My input looks like <a-input v-decorator="['name']" />
Can someone give me a hint, what i am doing wrong?

Christopher Dosin
@ChristopherDosin
@tangjinzhou So just <a-input :value="data.name"/> would be the correct way to archive this?
I don't really get it with the v-decorator :)
         <!-- this is working -->
          <a-input :value="data.name"/>
          <!-- this not -->
          <a-input v-decorator="['name']"/>
Christopher Dosin
@ChristopherDosin

But if i use :value="data.name" i can't change the input value ..
I made a little 10 seconds video here:

https://streamable.com/s70h8

tangjinzhou
@tangjinzhou
If you donot need automatically collect data and verify. You can you <a-input v-model="data.name" />. @kayyyy But if you use v-decorator, any value changes will be collected by the form.
Christopher Dosin
@ChristopherDosin

@tangjinzhou So if i have:

data() {
    return {
      data: {
         name: "foo";
       }
    };
  },
....

I use

<a-input v-decorator="['name']"/>

And

data() {
    return {
      data: {
         name: "foo";
       },
      form: this.$form.createForm(this.data)
    };
  },

And <a-input v-decorator="['name']"/> should be filled with data.name?

Christopher Dosin
@ChristopherDosin

I made a codesandbox with a tiny example here :)

Edit Vue Template

The whole logic is in the App.vue

Christopher Dosin
@ChristopherDosin

Or do i have to write everytime

created () {
    this.form = this.$form.createForm(this, {
      mapPropsToFields: () => {
        return {
          foo: this.$form.createFormField({
            ...this.foo,
            value: this.data.foo,
          }),
          bar: this.$form.createFormField({
            ...this.bar,
            value: this.data.bar,
          }),
        }
      },
    })
  }

Because this is working.

tangjinzhou
@tangjinzhou
https://codesandbox.io/s/2o2m71x3my
If your data is not obtained asynchronously. Data bound by v-decorator is not responsive. You can use initialValue to set init value. Component changes are not reflected on the data. Data changes are not automatically reflected on the component. You can use getFieldsValue, setFields, etc. to get and synchronize data. @kayyyy
Christopher Dosin
@ChristopherDosin

@tangjinzhou Thanks for your example: My data is coming asynchronously from a nodejs backend.

  methods: {
    async getAllSettings() {
      await this.$http({
        url: "/settings",
        method: "GET"
      })
        .then(response => {
          this.data = response.data;
        })
     .....

My backend ( AdonisJs ) controller is returning it also with async

  async index() {
    return await Settings.firstOrFail();
  }
Christopher Dosin
@ChristopherDosin
Is there any reason why <style scoped> sometimes not works, only <style>?
tangjinzhou
@tangjinzhou
@kayyyy This has nothing to do with the ant-design-vue library. I think you can go to Vue.js to submit issue.
Christopher Dosin
@ChristopherDosin

Can someone maybe help me one more time? :)
I'm trying to add a new table row. But the data is never passed to my dataSource array.

Here's my example what i have. I don't get it why the inputs are not bind to the array.
The Table is in /src/components/AntTable.vue

Edit Vue Template

Christopher Dosin
@ChristopherDosin
If i writ an input like <input v-model="dataSource[index].name" /> it's working and the array is updated.
Christopher Dosin
@ChristopherDosin
And when i'm sending the form it sends only an empty object.
tangjinzhou
@tangjinzhou
Your question is very strange. How is the v-decorator bound to the table. I suggest you take a look at the documentation. @kayyyy
Michy Amrane
@mIcHyAmRaNe

hello,
when i use :dropdownStyle="{ textShadow: shadow }" in <a-select> everything is working well == the shadow is applied;

but when i add :dropdownStyle="{ color: activeColor, textShadow: shadow }" the shadow is applied but no the text color...

i have:

shadow: "0.6px 0.6px 6px #424242",
activeColor: "red",
tangjinzhou
@tangjinzhou
Michy Amrane
@mIcHyAmRaNe
@tangjinzhou thank you
and how to do if we would like to have each select item with a specific color
for example in the same example: jack with blue, Lucy with red, yiminghe with yellow color ?
Karter
@vKarter
Hi, guys can someone look at on this example https://codesandbox.io/s/3q3m0r4rk1
I have problem with record in Table component is undefined.
This example is copy-paste from documentation.
Do you have any idea why it happens?
tangjinzhou
@tangjinzhou
@vKarter please use vue 2.5.x
Karter
@vKarter
@tangjinzhou on ver 2.5.21 working fine, but 2.5.22 is broke.
Karter
@vKarter
@tangjinzhou Do we have something similiar like DateYear -> https://ng.ant.design/components/date-picker/en ? in Antd Vuejs?
tangjinzhou
@tangjinzhou
@vKarter no. you can use select instead it. You can give us an issue for this feature.
or something like this
Sraw
@Sraw
Hi everyone. I'm looking for a way to optimize ant-design-vue as it is too big for me. The generated vendor is 1.4 MB. So I think it would be better to use CDN as an external vendor. But there isn't many documents for this usage, how should I configure the vue-cli?