I using Kendo UI. I am trying to render a ternary operator within a html input checkbox.

The below create an error. How do i escape the values.

 <input type="checkbox" class="checkbox"  "\# (myVar)  ? ('checked') : '' #\">

My view script:

<script type="text/javascript">

    var app = new Vue({

      el: '#app',

      data: {

        myVar:true

      }

    })

</script>

I using Kendo UI. I am trying to render a ternary operator within a html input checkbox.

The below create an error. How do i escape the values.

 <input type="checkbox" class="checkbox"  "\# (myVar)  ? ('checked') : '' #\">

My view script:

<script type="text/javascript">

    var app = new Vue({

      el: '#app',

      data: {

        myVar:true

      }

    })

</script>

• vue.js
• kendo-ui

1 Answer 1

As shown in the docs, you can write something like this

<input type="checkbox" class="checkbox" :class="{ 'checked': myVar }">

And if myVar is truthy, it will then generate a checkbox checked class.

But you probably meant to have the attribute checked here?

Hence this might be more fitting as a general example

<script setup>
import { ref } from 'vue'

const myVar = ref(true)
</script>

<template>
  <p>Current value of 'myVar' is {{ myVar }}</p>

  <input type="checkbox" id="checkbox" v-model="myVar" />
  <label for="checkbox">{{ myVar }}</label>

  <br />
  <br />
  <input type="checkbox" class="checkbox" :class="{ 'checked': myVar }">
</template>

<style scoped>
.checked {
  margin: 2rem;
}
</style>

Here is a playground.
And here are the related docs for that specific binding.