конкатенация встроенного стиля компонента vue.js - PullRequest
Новая
       9

конкатенация встроенного стиля компонента vue.js

0 голосов
/ 06 ноября 2018

Я застрял с конкатенацией встроенного стиля компонента vue.js. Мой код следующий: 

components: {
  'twitter-item': {
    props: ['procolors'],
    template: '\
      <div class="color-quadrat" v-bind:data-id="procolors.id" v-bind:style="background-color: #{procolors.user.profile_background_color}">\
      <p>{{procolors.user.profile_background_color}}</p>\
      </div>\
     '
  }
}

Я пытаюсь получить procolors.user.profile_background_color в качестве встроенного цвета фона. Особенность в том, что значение из procolors.user.profile_background_color не имеет #. Поэтому я должен добавить это в шаблон.

Я испробовал всевозможные рекомендации из Интернета, но ни одна из них не сработала.

Любая помощь приветствуется!

Ответы [ 3 ]

0 голосов
/ 06 ноября 2018

У вас есть несколько вариантов добавления стиля. Если вы используете v-bind:style="..." или сокращение :style="...", вам нужно передать либо действительную строку, либо действительную переменную, либо действительный объект.

В настоящее время вы пытаетесь проанализировать background-color: #{procolors.user.profile_background_color} как javascript, который не будет работать.

Вы можете использовать шаблон JavaScript для создания строки: 

components: {
  'twitter-item': {
    props: ['procolors'],
    template: '\
      <div class="color-quadrat" v-bind:data-id="procolors.id" v-bind:style="`background-color: #${procolors.user.profile_background_color}`">\
      <p>{{procolors.user.profile_background_color}}</p>\
      </div>\
     '
  }
}

Часто более читабельно реорганизовать его, чтобы использовать вместо него переменную или функцию: 

components: {
  'twitter-item': {
    props: ['procolors'],
    template: '\
      <div class="color-quadrat" v-bind:data-id="procolors.id" v-bind:style="rowColor">\
      <p>{{procolors.user.profile_background_color}}</p>\
      </div>\
     ',
    computed: {
      rowColor () {
        return {
          "background-color": `#${this.procolors.user.profile_background_color}`
        }
      }
    }
  }
}
0 голосов
/ 06 ноября 2018

Соответствие Связывание встроенных стилей Документация по способам передачи встроенных стилей - в виде объекта или в виде массива.

В вашем примере background-color: #{procolors.user.profile_background_color} не является ни объектом, ни массивом.

Ради удобочитаемости и удобства сопровождения (и хорошей практики в целом) я бы предложил создать вычисляемое свойство, которое будет возвращать объект со встроенными стилями. Таким образом, будет более понятно, где проблема с конкатенацией:

Шаблон будет выглядеть следующим образом: 

 <div 
     class="color-quadrat" 
     :data-id="procolors.id"
     :style="itemStyles">

     <p>{{ procolors.user.profile_background_color }}</p>
  </div>

И вычисляемое свойство должно быть добавлено к тому же компоненту: 

props: ['procolors'],
template: `...`,
computed: {
  itemStyles () {
    return {
      backgroundColor: `#${this.procolors.user.profile_background_color}`
    }
  }
}

Если вы по-прежнему предпочитаете держать его встроенным, стиль привязки следует изменить на следующий: 

v-bind:style="{ backgroundColor: `#${procolors.user.profile_background_color}` }"
0 голосов
/ 06 ноября 2018

Используйте это, которое использует синтаксис объекта стиля * vue : 

:style="{backgroundColor: '#' + procolors.user.profile_background_color}"
...