title: How to properly apply ternary operator in v-model in vue.js?
body: <p>I am trying to apply the ternary operator in the v-model but it's not working. I also read a lot of similar questions and answers on StackOverflow but none answer my query.</p>
  <p>I have created a data variable <strong>testCondition</strong> which is set to false by default. Using this condition <code>testCondition?name:place</code>, <strong>place</strong> is returned in v-model if <strong>testCondition</strong> is false but if <strong>testCondition</strong> is true then v-model does not return anything.</p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: "#app",
    data: {
      name: '',
      place: '',
      testCondition: false,
    },
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 15px;
  }
  
  input {
    border-radius: 3px;
    padding: 5px;
    border: thin solid lightgrey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;br&gt;
    &lt;input type="text" v-model="testCondition?name:place"&gt;
    &lt;br&gt;&lt;br&gt; Test condition status: {{testCondition}}
    &lt;br&gt; Name: {{name}}
    &lt;br&gt; Place: {{place}}
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Expected result: If I change the value of <strong>testCondition</strong> from <strong>false</strong> to <strong>true</strong>, output should be shown in {{name}}</p>
  <p>Actual result: Only working for {{place}} if <strong>testCondition</strong> is set to <strong>false</strong></p>