Use a string binding for a dynamic class attribute?

[RohanTalip]

In my Vue.js 2.6.10 web app, I can write something (contrived) like this to use a string as the value to bind to the class attribute of an element:

<template>
  <img :class="imageClasses" :src="imageUrl" />
</template>

<script>
export default {
...
  computed: {
    imageClasses() {
      if (condition) {
        return "class1 class2";
      } else {
        return "class1";
      }
    },
    ...
  },
};
</script>

<style>
.class1 {
  height: 100px;
  width: 200px;
}

.class2 {
  border-width: 1px;
}
</style>

(Assume that imageUrl is valid.)

However in Vue Native, the dynamic binding of a string to the imageClass computed property doesn't appear to work:

<template>
  <Image :class="imageClasses" :source="imageSource" />
</template>

(Assume that imageSource is valid, and that the imageClasses computed property and styles are unchanged from above.)

Something like this, with a static class, works in Vue Native:

<Image class="class1" :source="imageSource" />

I can also use an object to dynamically bind to the class attribute in Vue Native:

<template>
  <Image :class="imageClasses" :src="imageUrl" />
</template>

<script>
export default {
...
  computed: {
    imageClasses() {
      return {
        class1: true,
        class2: condition,
      };
    },
    ...
  },
};
</script>

However, is it possible to dynamically bind a string to the class attribute?

I'm wondering if there are some commits in Vue.js that are missing in Vue Native ... ? (For example, that were added in Vue.js after code from react-vue was copied into vue-native-core.)

[neeraj-singh47]

@RohanTalip Seems like it's working. I just checked with Text component and it's working fine. Can you verify the same with a different component?

[neeraj-singh47]

  <view class="container">
    <text :class="imageClasses">Perfect!</text>
    </view>
</template>

<script>
export default {
    computed: {
    imageClasses() {
      if (true) {
        return "text-color-primary";
      } else {
        return "text-color-green";
      }
    }
    // this.$emit('myEvent')
  }
}

</script>
 
<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-color-primary {
  color: blue;
}
.text-color-green {
  color: green;
}
</style>

[RohanTalip]

This is working for me now. I probably had a typo somewhere. Sorry for the trouble.

[tmaly1980]

I've been having trouble with this, specifically for view components. Not able to get it to work!

[tmaly1980]

OK Seems my problem was that class can only be set to a single class, not a string of multiple classes. Seems like a limitation, and I don't see why it can't concatenate the computed styles together.

ie:

class="one two"
doesn't work.

Also seems that I cannot split/share class definitions, either, ie:

.class1 {
  color: blue;
}
.class1, .class2 {
  background-color: red;
}

The above will actually only apply the second reference to class1, and totally ignore the style defined in the first reference.

[RohanTalip]

@tmaly1980, multiple classes in the class attribute work for me.

Splitting of class definitions (as you explained it above) doesn't work for me, but so far that hasn't been a problem.

[tmaly1980]

@RohanTalip Can you provide an example?

[RohanTalip]

@tmaly1980, done, in issue #173 .