Dynamische Klassenzuweisung mit vue.js

dynamische-klassenzuweisung-mit-vue-js.markdown

Dynamische Klassenzuweisung mit vue.js

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<div id="app">
  <h1 class="app-headline">Doesn't work as intended</h1>
    <div class="test" :class="[flexDirection.standard, alignItems.standard]">
      <h2>{{headline}}</h2>
      <p>{{paragraph}}</p>
    </div>
  <div class="grid">
    <h3 class="property">{{ flexDirection.property }}</h3>
    <div class="select">
      <select v-model="flexDirection.standard">
        <option v-for="value in flexDirection.vals" :value="value" :selected="flexDirection.standard ? true : false" :key="value.id">{{ value }}</option>
      </select>
    </div>

    <div class="code-wrapper">
      <h1>{{flexDirection.property}}: {{flexDirection.standard}}</h1>
      <h2>Class: </h2>
    </div>   
  </div>
  <div class="grid">
    <h3 class="property">{{ alignItems.property }}</h3>
          <div class="select">
            <select v-model="alignItems.standard">
              <option v-for="value in alignItems.vals" v-model="alignItemsSplit" :value="value" :selected="alignItems.standard ? true : false" :key="value.id">{{ value.display }}</option>
            </select>
          </div>
    <h1>{{alignItems.property}}: {{alignItems.standard}}</h1>  
    <h2>Class: {{alignItems.standard}}</h2>
  </div>

</div> <!-- #app -->

script.js

var app = new Vue({
  el: '#app',
  data: {
    headline: 'Test-Container',
    paragraph: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus consequatur voluptas officiis omnis.",
    flexDirection: {
      property: 'flex-direction',
      standard: 'row',
      vals: ['row', 'row-reverse', 'column', 'column-reverse'],
      class: ['row', 'row-reverse', 'column', 'column-reverse']
    },
    alignItems: {
      property: "align-items",
      standard: 'align-items-start',
      displayMe: 'flex-start',
      vals: [
        { display: 'flex-start', class: 'align-items-start'},
        { display: 'flex-end', class: 'align-items-end'},
        { display: 'center', class: 'align-items-center'},
        { display: 'baseline', class: 'align-items-baseline'},
        { display: 'stretch', class: 'align-items-stretch'}        
      ]
    }
  },
  methods: {
    alignItemsSplit: function(val) {
      let display = val.display;
      let classy = val.class;
  
        this.alignItems.standard = classy;
        this.alignItems.displayMe = display;        
    }
  },
  computed: {
    styles: function(){
      return {
        
      }
    }
  }

})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

style.scss

.test {
  width: 100px;
  padding: 10px;
  border: 1px solid #000;
  
  h2 {
    font-size: 20px;
  }
}

.class1 {
  background-color: blue;
}
.class2 {
  background-color: rgba(162,0,0,0.5);
}
.class3 {
  background-color: yellow;
}

.dingens1 {
  border: 10px solid #f00;
}
.dingens2 {
  border: 3px dotted #000;
}
.dingens3 {
  border: 3px dashed #f00;
}


body {
  padding: 40px;
}

.control {
  margin-top: 30px;
  select {
    margin-right: 20px;
  }
}

#app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
    "headline headline"
    "test test" 
    "select1 select2";
}
.app-headline {
  grid-area: headline;
}
h1, h2, h3 {
  font-size: 1.25rem;
}
.test {
  grid-area: test;
}
.grid:first-child {
  grid-area: select1;
}
.grid:last-child {
  grid-area: select2;
}