Element: select & bug

Created on 17 Sep 2018  ·  4Comments  ·  Source: ElemeFE/element

Q: 默认值没有呀?(select no default value)

https://element.eleme.io/#/zh-CN/component/select#select-xuan-ze-qi

select bug / api bug

<el-form-item label="角色类型" prop="role">
        <el-select v-model="formData.role" placeholder="请输入角色类型" value="Developer">
            <!-- <el-option label="开发" value="Developer" selected></el-option> -->
            <el-option label="开发" value="Developer"></el-option>
            <el-option label="配管" value="Operator"></el-option>
            <el-option label="管理员" value="Admin"></el-option>
        </el-select>
    </el-form-item>

A: initial data

<script>
    export default {
        // components: { BasicContainer },
        name: "UserForm",
        data() {
            return {
                formData: {
                    user_name: '',
                    role: 'Developer',
                    password: '',
                    email: null,
                },
                error_desc: ``,
            };
        },
        methods: {
        }
    };
</script>
invalid

Most helpful comment

React initial state

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

Vue initial data

<section>
    <div id="vue_app">
        <h1>title: {{title}}</h1>
        <h2>website: {{site}}</h2>
        <h2>url: {{url}}</h2>
        <h2>{{details()}}</h2>
    </div>
</section>


<script src="./libs/2.x/2.5.16/vue.min.js" type="690379af4ba509843416c907-text/javascript"></script>

<script type="690379af4ba509843416c907-text/javascript">
    var vm = new Vue({
        el: '#vue_app',
        // vm === data
        data: {
            title: "Vue 2.x Tutorials",
            url: "vue.xgqfrms.xyz",
            site: "https://vue.xgqfrms.xyz",
            alexa: "100",
        },
        methods: {
            details: function() {
                let site = this.site;
                return  `${site} 学的不仅是技术,更是梦想!`;
            }
        }
    });
    vm.site = "https://vue.xgqfrms.xyz";
    setTimeout(() => {
        let div = document.querySelector("#vue_app");
        div.style.display = "block";
    }, 0);
</script>

https://vue.xgqfrms.xyz/

All 4 comments

Hello, this issue has been closed because it does not conform to our issue requirements. Please submit issues with issue-generator. More info can be found in #3693.

Go & learn the bloody JS and Vue basics before asking stupid questions.

React initial state

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

Vue initial data

<section>
    <div id="vue_app">
        <h1>title: {{title}}</h1>
        <h2>website: {{site}}</h2>
        <h2>url: {{url}}</h2>
        <h2>{{details()}}</h2>
    </div>
</section>


<script src="./libs/2.x/2.5.16/vue.min.js" type="690379af4ba509843416c907-text/javascript"></script>

<script type="690379af4ba509843416c907-text/javascript">
    var vm = new Vue({
        el: '#vue_app',
        // vm === data
        data: {
            title: "Vue 2.x Tutorials",
            url: "vue.xgqfrms.xyz",
            site: "https://vue.xgqfrms.xyz",
            alexa: "100",
        },
        methods: {
            details: function() {
                let site = this.site;
                return  `${site} 学的不仅是技术,更是梦想!`;
            }
        }
    });
    vm.site = "https://vue.xgqfrms.xyz";
    setTimeout(() => {
        let div = document.querySelector("#vue_app");
        div.style.display = "block";
    }, 0);
</script>

https://vue.xgqfrms.xyz/

@wacky6

Talk is cheap, show me the codes!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

akaylh picture akaylh  ·  3Comments

EdenSpark picture EdenSpark  ·  3Comments

yuchonghua picture yuchonghua  ·  3Comments

sudo-suhas picture sudo-suhas  ·  3Comments

yubo111 picture yubo111  ·  3Comments