title: Is there a way to ignore whitespace inside of the value of a <option> tag?
body: <p>I'm creating a project where I have a Django server sending JSON data to a template which has Vue.js running on it. The JSON data is sending values with a trailing space after them which is causing problems. I'd like to remove them on the HTML page if possible.</p>
  
  <p>I've tried using Javascript.trim() on the JSON data which didn't seem to have any effect. I also can't strip the entire JSON file of whitespace, since some values need to have whitespace in them.</p>
  
  <p>I am trying to remove whitespace from {"keyword" : "value"} sets. The "value" section sometimes has "value " or " value" in them.</p>
  
  <pre class="lang-html prettyprint-override"><code>This won't work
  &lt;option value="And"&gt;And&lt;/option&gt;
  
  But this will
  &lt;option value="And "&gt;And&lt;/option&gt;
  </code></pre>
  
  <p>The JSON object contains</p>
  
  <pre><code>"keyword": "And "
  </code></pre>
  
  <p>Instead of</p>
  
  <pre><code>"keyword": "And"
  </code></pre>
  
  <p>I expect the  tag to work regardless of the whitespace surrounding the value in the data.</p>
  
  <p>Edit:
  I can't use Javascript's trim() function, since there are dozens of occurences of the issue in the JSON data. Looping through the data and trimming each individual string would significantly increase the load times for the page.</p>
  
  <p>Edit2:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;b-form-select for="action-text" v-model="step.keyword" class="mx-3"&gt;
      &lt;option value="Given "&gt;Given&lt;/option&gt;
      &lt;option value="When "&gt;When&lt;/option&gt;
      &lt;option value="Then "&gt;Then&lt;/option&gt;
      &lt;option value="And "&gt;And&lt;/option&gt;
      &lt;option value="But "&gt;But&lt;/option&gt;
  &lt;/b-form-select&gt;
  </code></pre>
  
  <p>Where in this would I do as needed trimming?</p>