title: Toggling button issue in polymer
body: <p>Im trying to toggle the displaying of message using a button.
  Below is my code.</p>
  <pre><code>class DisplayMessage extends PolymerElement {
    // DO YOUR CHANGES HERE
    static get template() {
      return html`
        &lt;style&gt;
          :host {
            display: block;
          }
        &lt;/style&gt;
  
        &lt;h2&gt;Hello [[prop1]]!&lt;/h2&gt;
        &lt;button on-click=&quot;toggle&quot;&gt;Toggle Message&lt;/button&gt; &lt;br /&gt;
        &lt;template is=&quot;dom-if&quot; if=&quot;{{user.authorise }}&quot;&gt;
          &lt;br /&gt;
          &lt;span&gt;I should now display message.&lt;/span&gt;
        &lt;/template&gt;
      `;
    }
  
    toggle() {
      // DO YOUR CHANGES HERE
      // hint: use set method to do the required changes
      
      //console.log(this.user);
      //this.user = !this.user
    }
  
    static get properties() {
      return {
        prop1: {
          type: String,
          value: 'user',
        },
        user: {
          type: Object,
          value: function () {
            return { authorise: false}; // HINT: USE BOOLEAN VALUES TO HIDE THE MESSAGE BY DEFAULT
          },
          notify: true,
        },
      };
    }
  }
  
  window.customElements.define('display-message', DisplayMessage);
  </code></pre>
  <p>I tried thinking for like hours, but couldn't solve. The requirement her is on clicking the button, the click handler toggle should change the value of authorize in user property to true. And on clicking again to false and so on. I need to use set method within toggle method. I'm not getting how to do this. Please help me on this.</p>
  <p>Thanks in advance.</p>